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

发表于 2年以前 | 总阅读数：809 次

这是《用组合编写更好的代码》第二篇，之前文章：

[Vue3，用组合的方式来编写更好的代码(1/5)]

正文开始。

在使用 vue 组合时，有时候想用 ref，有时候又不想使用。本节，介绍一种模式，可以让我即可以使用 ref，又可以不使用，从而让组件更具有灵活性。

使用ref和unref获得更灵活的参数

几乎所有可组合对象都需要某种类型的参数作为输入。通常，这是一个响应式 ref。它也可以是一个原始的Javascript类型，比如字符串、数字或对象。

但是我们想要编写更加灵活和可重用的组合，所以我们不仅要接收 ref 类型的参数也可以接收原始类型参数，然后我们将参数转换为我们需要参数。如下所示：

// 传递一个 ref
const countRef = ref(2);
useCount(countRef);

// 或者直接一个数字
const countRef = useRef(2);

VueUse 中的 useTitle 也是采用这种模式。

当我们传入一个 ref 时，网页标题就可以通过 .value 的方式来动态更改。

const title = ref('This is the title');
useTitle(title);
title.value = 'New title please';

如果传入的是一个字符串，useTitle内部会创建一个 ref，值为我们所传入的字符，最后返回一个 ref 变量，然后 .value 的方式来动态更改。

const title = useTitle('This is the title');
title.value = 'New title please';

在组合中实现一个灵活的参数

为了让灵活的参数模式能工作，我们需要对得到的参数使用ref函数或unref函数。

export default useMyComposable(input) {
  const ref = ref(input);
}

export default useMyComposable(input) {
  const rawValue = unref(input);
}

ref 函数将为我们创建一个新的ref。但如果我们传给它一个ref，它只是把这个ref返回给我们

// 创建一个 ref
const myRef = ref(0);

// 结果是相等的
assert(myRef === ref(myRef));

unref函数的工作原理是一样的，但是它要么解开一个ref，要么把我们的原始值还给我们。

const value = unref(myRef);

// 结果是相等的
assert(value === unref(value));

让我们看看VueUse中的一些组合是如何实现这个模式的。VueUse是Vue 3的一个开源组合集合，编写得非常好。它是学习如何编写可组合代码的一个很好的资源

useTitle

回到useTitle，这个我们已经很熟悉它。

这种可组合的模式可以让我们传入一个字符串或一个字符串的 ref。它并不关心我们提供的是哪一个。

// Pass in a string
const titleRef = useTitle('Initial title');

// Pass in a ref of a string
const titleRef = ref('Initial title');
useTitle(titleRef);

在源代码中，可以看到，在我们对选项对象进行解构之后，我们就创建了title ref。这里使用了ref函数，它允许我们使用一个ref或一个字符串来创建 title 的 ref。

// ...
const title = ref(newTitle ?? document?.title ?? null)
// ...

这里的意思是先取 newTitle 作为初始化值，如果没有在取 document?.title，还是没有就取 null。

对于TypeScript 使用者来说，这里有一些趣事需要注意。

这里使用的newTitle变量的类型是MaybeRef<string>。下面是这个类型的定义：

type MaybeRef<T> = T | Ref<T>

这个类型定义意味着 MaybeRef<string> 类型既可以是一个字符串，也可以是一个Ref<string>，也就是一个里面有一个字符串值的Ref。

我们接着看下一个组合也是使用这种类型来实现这种模式。

useCssVar

useCssVar 组合允许我们抓取一个CSS变量的值并在我们的应用程序中使用它。

const backgroundColor = useCssVar('--background-color');

但与useTitle不同的是，这里我们需要字符串值，这样我们就可以在DOM中查找CSS变量。使用unref函数，这个可组合的函数可以同时处理传入的引用和字符串。

// Using a string
const backgroundColor = useCssVar('--background-color');

// Using a ref
const cssVarRef = ref('--background-color');
const backgroundColor = useCssVar(cssVarRef);

看一下源代码，我们可以看到它使用unref函数来完成这个任务。实际上，它使用了一个辅助函数，叫做unrefElement，以确保我们得到的是一个DOM元素，而不只是一个Vue实例。

如果想进一步探索它，VueUse中的大多数组合都实现了这种模式。所以，选择一个感兴趣的，然后深入到代码中去吧。

总结

我们刚刚花了一些时间学习了这个系列的第二个模式，在这个模式中，我们可以通过在我们的可组合程序中巧妙地使用 ref 和 unref 来更灵活地使用参数。无论你碰巧有一个ref还是只有Javascript的原始值，可合成的东西仍然可以工作。它能适应你的使用方式!

我们还看了VueUse库如何在 useTitle 和 useCssVar 组合中实现这种模式。useTitle 组合使用 ref 函数，而 useCssVar 使用 unref 函数，这样我们就可以看到两种变化的作用。

在下一篇文章中，我们将介绍另一种模式，通过使返回值动态化来改进它们。我们将学习如何根据需要，返回一个单一的值或一个对象。

// Returns a single value
const isDark = useDark();

// Returns an object of values
const {
  counter,
  pause,
  resume,
} = useInterval(1000, { controls: true });

这种模式可以使你的可组合性在使用上简单得多，特别是当你在大多数时候只需要一个单一的值时。