有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
这是《用组合编写更好的代码》第二篇,之前文章:
- 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});
这种模式能够使你的可组合性在应用上简略得多,特地是当你在大多数时候只须要一个繁多的值时。
编辑中可能存在的 bug 没法实时晓得,预先为了解决这些 bug, 花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
作者:Michael Thiessen 译者:小智 起源:vuemastery
原文:https://www.vuemastery.com/bl…
交换
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。