Vue3 用组合编写更好的代码：灵活的参数(2/5)

,在使用 vue 组合时，有时候想用 ref，有时候又不想使用。本节，介绍一种模式，可以让我即可以使用 ref，又可以不使用，从而让组件更具有灵活性。,几乎所有可组合对象都需要某种类型的参数作为输入。通常，这是一个响应式 ref。它也可以是一个原始的Javascript类型，比如字符串、数字或对象。,但是我们想要编写更加灵活和可重用的组合，所以我们不仅要接收 ref 类型的参数也可以接收原始类型参数，然后我们将参数转换为我们需要参数。如下所示：,VueUse 中的 useTitle 也是采用这种模式。,当我们传入一个 ref 时，网页标题就可以通过 .value 的方式来动态更改。,如果传入的是一个字符串，useTitle内部会创建一个 ref，值为我们所传入的字符，最后返回一个 ref 变量，然后 .value 的方式来动态更改。,为了让灵活的参数模式能工作，我们需要对得到的参数使用ref函数或unref函数。,ref 函数将为我们创建一个新的ref。但如果我们传给它一个ref，它只是把这个ref返回给我们。,unref函数的工作原理是一样的，但是它要么解开一个ref，要么把我们的原始值还给我们。,让我们看看VueUse中的一些组合是如何实现这个模式的。VueUse是Vue 3的一个开源组合集合，编写得非常好。它是学习如何编写可组合代码的一个很好的资源。,回到useTitle，这个我们已经很熟悉它。,这种可组合的模式可以让我们传入一个字符串或一个字符串的 ref。它并不关心我们提供的是哪一个。,在源代码中，可以看到，在我们对选项对象进行解构之后，我们就创建了title ref。这里使用了ref函数，它允许我们使用一个ref或一个字符串来创建 title 的 ref。,这里的意思是先取 newTitle 作为初始化值，如果没有在取 document?.title，还是没有就取 null。,对于TypeScript 使用者来说，这里有一些趣事需要注意。,这里使用的newTitle变量的类型是MaybeRef<string>。下面是这个类型的定义：,这个类型定义意味着 MaybeRef<string> 类型既可以是一个字符串，也可以是一个Ref<string>，也就是一个里面有一个字符串值的Ref。,我们接着看下一个组合也是使用这种类型来实现这种模式。,useCssVar 组合允许我们抓取一个CSS变量的值并在我们的应用程序中使用它。,但与useTitle不同的是，这里我们需要字符串值，这样我们就可以在DOM中查找CSS变量。使用unref函数，这个可组合的函数可以同时处理传入的引用和字符串。,看一下源代码，我们可以看到它使用unref函数来完成这个任务。实际上，它使用了一个辅助函数，叫做unrefElement，以确保我们得到的是一个DOM元素，而不只是一个Vue实例。,如果想进一步探索它，VueUse中的大多数组合都实现了这种模式。所以，选择一个感兴趣的，然后深入到代码中去吧。,我们刚刚花了一些时间学习了这个系列的第二个模式，在这个模式中，我们可以通过在我们的可组合程序中巧妙地使用 ref 和 unref 来更灵活地使用参数。无论你碰巧有一个ref还是只有Javascript的原始值，可合成的东西仍然可以工作。它能适应你的使用方式!,我们还看了VueUse库如何在 useTitle 和 useCssVar 组合中实现这种模式。useTitle 组合使用 ref 函数，而 useCssVar 使用 unref 函数，这样我们就可以看到两种变化的作用。,在下一篇文章中，我们将介绍另一种模式，通过使返回值动态化来改进它们。我们将学习如何根据需要，返回一个单一的值或一个对象。,这种模式可以使你的可组合性在使用上简单得多，特别是当你在大多数时候只需要一个单一的值时。