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

开发 前端
本节,介绍一种模式,可以让我即可以使用 ref,又可以不使用,从而让组件更具有灵活性。

在使用 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 });

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

责任编辑:姜华 来源: 今日头条
相关推荐

2022-07-08 08:52:25

Vue3组合动态返回

2022-07-11 10:32:35

Vue3await响应式

2020-05-08 19:52:31

Reactreact.js前端

2022-06-13 08:39:21

Vue3API

2021-03-17 08:00:59

JS语言Javascript

2021-01-15 05:16:37

Vue3开源代码量

2022-06-21 12:09:18

Vue差异

2014-04-21 10:14:52

PromisesJavaScript

2023-10-10 08:00:00

2021-12-01 08:11:44

Vue3 插件Vue应用

2021-12-02 05:50:35

Vue3 插件Vue应用

2021-05-27 10:36:34

ProvideInjectVue3

2021-11-30 08:19:43

Vue3 插件Vue应用

2023-11-28 09:03:59

Vue.jsJavaScript

2021-12-08 09:09:33

Vue 3 Computed Vue2

2020-11-16 11:10:21

代码开发工具

2020-03-25 18:23:07

Vue2Vue3组件

2021-03-22 10:05:25

开源技术 项目

2022-07-18 10:43:12

项目TienChinJava

2020-11-12 08:32:14

Vue3模板优化
点赞
收藏

51CTO技术栈公众号