关于javascript:Vue3用组合编写更好的代码灵活的参数25

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

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

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

注释开始。

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

应用ref和unref取得更灵便的参数

简直所有可组合对象都须要某种类型的参数作为输出。通常，这是一个响应式 ref。它也能够是一个原始的Javascript类型，比方字符串、数字或对象。

然而咱们想要编写更加灵便和可重用的组合，所以咱们不仅要接管 ref 类型的参数也能够接管原始类型参数，而后咱们将参数转换为咱们须要参数。如下所示：

// 传递一个 refconst 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返回给咱们

// 创立一个 refconst 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 stringconst titleRef = useTitle('Initial title');// Pass in a ref of a stringconst 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 stringconst backgroundColor = useCssVar('--background-color');// Using a refconst 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 valueconst isDark = useDark();// Returns an object of valuesconst {  counter,  pause,  resume,} = useInterval(1000, { controls: true });

这种模式能够使你的可组合性在应用上简略得多，特地是当你在大多数时候只须要一个繁多的值时。

编辑中可能存在的bug没法实时晓得，预先为了解决这些bug,花了大量的工夫进行log 调试，这边顺便给大家举荐一个好用的BUG监控工具 Fundebug。

作者：Michael Thiessen 译者：小智起源：vuemastery

原文： https://www.vuemastery.com/bl...

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。