Vue3，使用组合写出更好的代码：参数灵活（2-4）

有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。这是《用组合编写更好的代码》的第二篇文章，上一篇：Vue3，使用组合写出更好的代码（1/5）正文开始。在使用vue组合的时候，有时候想用ref，有时候又不想用。本节介绍一种模式，可以让我使用ref或不使用ref，让组件更加灵活。使用ref和unref获得更灵活的参数几乎所有可组合对象都需要某种类型的参数作为输入。通常，这是一个反应性参考。它也可以是原始Javascript类型，例如字符串、数字或对象。但是我们想写出更灵活和可重用的组合，所以我们不仅接受ref类型参数，还接受raw类型参数，然后我们将参数转换为我们需要的参数。如下所示：//传递一个refconstcountRef=ref(2);使用计数（计数参考）；//或者直接一个数字constcountRef=useRef(2);VueUse中的useTitle也是采用这种模式。当我们传入一个ref时，页面的标题可以通过.value的方式动态改变。consttitle=ref('这是标题');useTitle(title);title.value='请输入新标题';如果传入的是字符串，useTitle内部会用我们传入的字符值创建一个ref，最后返回一个ref变量，然后使用.value方法动态变化。consttitle=useTitle('这是标题');title.value='请输入新标题';在组合中实现灵活的参数为了使灵活的参数模式起作用，我们需要使用ref函数或unref函数。exportdefaultuseMyComposable(input){constref=ref(input);}exportdefaultuseMyComposable(input){constrawValue=unref(input);ref函数将为我们创建一个新的ref。但是如果我们给它传递一个ref，它只会将ref返回给我们//创建一个refconstmyRef=ref(0);//结果相等assert(myRef===ref(myRef));unref函数的工作方式相同，但它要么解包ref要么返回我们的原始值。constvalue=unref(myRef);//结果相等assert(value===unref(value));让我们看看VueUse中的一些组合是如何实现这种模式的。VueUse是一个开源的Vue3合成合集，写的非常好。它是学习如何编写可组合代码的绝佳资源。useTitle又回到了useTitle，我们已经很熟悉了。这种可组合模式让我们可以传入字符串或字符串的引用。它不关心我们提供哪一个。//传入一个字符串consttitleRef=useTitle('Initialtitle');//传入一个字符串的refconsttitleRef=ref('Initialtitle');useTitle(titleRef);在源代码中，您可以看到在我们解构选项对象之后，我们创建了标题ref。这里使用了ref函数，它允许我们使用ref或字符串来创建标题的ref。//...consttitle=ref(newTitle??document?.title??null)//...这里的意思是先取newTitle作为初始化值，如果不取document?.title，还是不行，采取null。对于TypeScript用户，这里有一些有趣的事情需要注意。这里使用的newTitle变量的类型是MaybeRef。下面是这个类型的定义：typeMaybeRef=T|Ref这种类型定义意味着MaybeRef类型可以是字符串或Ref，即具有字符串值Ref的类型。我们继续看下一个组合也是使用这个类型来实现这个模式。useCssVaruseCssVar组合允许我们获取CSS变量的值并在我们的应用程序中使用它。constbackgroundColor=useCssVar('--背景颜色');但与useTitle不同的是，这里我们需要字符串值，以便我们可以在DOM中查找CSS变量。使用unref函数，这个可组合函数可以同时处理传入的引用和字符串。//UsingastringconstbackgroundColor=useCssVar('--background-color');//UsingarefconstcssVarRef=ref('--background-color');constbackgroundColor=useCssVar(cssVarRef);看源码，我们可以看到它使用了unref函数来完成这个任务。事实上，它使用一个名为unrefElement的辅助函数来确保我们得到一个DOM元素，而不仅仅是一个Vue实例。如果您想进一步探索它，VueUse中的大多数组件都实现了这种模式。因此，选择一个您感兴趣的，然后深入研究代码。总结我们刚刚花了一些时间学习本系列的第二个模式，在这个模式中，我们可以通过在可组合程序中巧妙地使用ref和unref来更灵活地使用参数。无论您碰巧有一个ref还是只有一个Javascript原始值，可合成的东西仍然可以工作。它适应您的使用方式！我们还研究了VueUse库如何在useTitle和useCssVar组合中实现此模式。useTitle结合使用了ref函数，useCssVar结合使用了unref函数，所以我们可以看到两种变体的动作。在下一篇文章中，我们将介绍另一种通过使返回值动态化来改进返回值的模式。我们将学习如何根据需要返回单个值或对象。//ReturnsasinglevalueconstisDark=useDark();//Returnsanobjectofvaluesconst{counter,pause,resume,}=useInterval(1000,{controls:true});这种模式使您的可组合性更易于使用，尤其是当您大部分时间只需要一个值时。编辑过程中可能存在的BUG无法实时获知。之后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。作者：MichaelThiessen译者：小智来源：vuemastery原文：https://www.vuemastery.com/bl...交流有梦想，有干货，微信搜索【大招天下】关注这个我在还在清晨洗碗洗碗的智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。