文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-13 21:32

关注

在使用 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。下面是这个类型的定义:

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

这个类型定义意味着 MaybeRef 类型既可以是一个字符串,也可以是一个Ref,也就是一个里面有一个字符串值的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 });

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

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯