社区编辑申请
注册/登录
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-08-04 14:38:49

vue3.2setup代码

2022-03-24 15:28:43

Vue开发框架

2021-08-27 06:43:49

2020-09-10 07:44:54

技巧Vue代码

2022-04-04 16:53:56

2021-12-01 08:11:44

2021-11-30 08:19:43

2020-11-06 08:54:43

Vue 3.0函数代码

2020-04-22 14:15:32

Vue 3.0语法前端

2020-10-28 08:06:09

Vue3框架数据

2021-04-02 10:30:18

Vue3.0前端代码

2021-10-21 06:52:17

2021-06-01 07:40:59

Vue3更新技巧

2021-07-29 12:05:18

2020-10-13 09:28:51

同话题下的热门内容

字节的前端监控 SDK 是怎样设计的TestOps完全手册:工作流、生命周期、团队和流程使用Python快速搭建接口自动化测试脚本实战总结不要在 Python 中使用循环,这些方法其实更棒!哪种编程语言最适合开发网页抓取工具?从 Islands Architecture 看前端有多卷反应式JavaScript:前端架构的演变什么是WebAssembly?

编辑推荐

太厉害了,终于有人能把TCP/IP协议讲的明明白白了!牛人5次面试腾讯不成功的经验HBase原理–所有Region切分的细节都在这里了Javascript如何监听页面刷新和关闭事件如何搭建一个HTTPS服务端
我收藏的内容
点赞
收藏

51CTO技术栈公众号