乐趣区

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

有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 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 中的大多数组合都实现了这种模式。所以,抉择一个感兴趣的,而后深刻到代码中去吧。

总结

咱们刚刚花了一些工夫学习了这个系列的第二个模式,在这个模式中,咱们能够通过在咱们的可组合程序中奇妙地应用 refunref 来更灵便地应用参数。无论你碰巧有一个 ref 还是只有 Javascript 的原始值,可合成的货色依然能够工作。它能适应你的应用形式!

咱们还看了 VueUse 库如何在 useTitleuseCssVar 组合中实现这种模式。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 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。

退出移动版