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

总结

咱们刚刚花了一些工夫学习了这个系列的第二个模式，在这个模式中，咱们能够通过在咱们的可组合程序中奇妙地应用 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 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。