关于前端:Vue3-Composable最佳实践二

2次阅读

共计 2791 个字符，预计需要花费 7 分钟才能阅读完成。

本文为翻译文章，局部内容不免了解有偏差，如有谬误欢送大家斧正。原文链接见文章开端。

在应用 Vue.js 中的组合式时，有时你曾经有了一个想要应用的ref，而有时你没有。本文将介绍一种模式，让你能够以两种形式应用组合式，从而在编写应用程序时提供更多的灵活性。

本篇是这个系列文章的第二篇，全副涵盖内容如下：

1. 如何通过选项对象参数使您的组合更加可配置；
2. 应用 ref 和 unref 使咱们的参数更加灵便；👈 本篇主题
3. 如何使你的返回值更有用；
4. 为什么从接口定义开始能够使你的组合式函数更弱小；
5. 如何应用异步代码而无需“期待”– 使您的代码更易于了解；

通常，组合式 API 须要某些类型的参数作为输出，通常会应用到响应式变量参数。它也能够是原始的 Javascript 类型，如字符串，数字或对象。然而，为了使组合式更具灵活性和可重用性，咱们会心愿它能够承受任意类型的参数，并在运行时将其转换为所需的类型。

// Works if we give it a ref we already have 
const countRef = ref(2); 
useCount(countRef); 

// Also works if we give it just a number 
const countRef = useCount(2);

咱们上篇外面提到的 useTitle 也实用于这种模式。当咱们传入一个 ref 的时候，页面的题目将会被设置成这个 ref 的value。

const title = ref('这里是题目'); 
useTitle(title); 
title.value = '这是一个新题目';

如果咱们传入一个字符串变量的话，它将会创立一个新的 ref 和题目进行关联：

const title = useTitle('这里是题目'); 
title.value = '这是一个新题目';

下面的例子可能看起来区别不大，然而，在咱们应用到一些办法或者组合式 API 的时候，咱们可能会有不同的援用起源，从而这个组合式能够适应不同的状况。上面让咱们来看一下如何在咱们的组合式中应用这种模式。

想实现灵便的参数模式，咱们须要应用到 ref 和unref办法在参数下面。

// When we need to use a ref in the composable 
export default useMyComposable(input) {const ref = ref(input); 
} 
// When we need to use a raw value in the composable 
export default useMyComposable(input) {const rawValue = unref(input); 
}

如果是非响应式的参数变量的话，ref办法会创立一个新的 ref 变量给咱们；如果是响应式的话，它会间接将对应的变量返回给咱们。

// Create a new ref 
const myRef = ref(0); 

// Get the same ref back 
assert(myRef === ref(myRef));

unref办法相似，只不过它是将变量的实在值返回给咱们

// Unwrap to get the inner value 
const value = unref(myRef); 

// Returns the same primitive value 
assert(value === unref(value));

上面让咱们看看在 VueUse 中应用这种模式的例子。

让咱们持续来看下咱们曾经相熟的 useTitle 办法。它容许咱们传入一个字符串或者是响应式字符串变量：

// 传入字符串变量
const titleRef = useTitle('Initial title'); 

// 传入响应式字符串变量 
const titleRef = ref('Initial title'); 
useTitle(titleRef);

在它的源码中，咱们能够看出，它通过 ref 办法来解决咱们传入的变量

// ... 
const title = ref(newTitle ?? document?.title ?? null) 
// ...

它应用到了 JavaScript 中的 nullish coalescing(空值合并) 运算符 ，其语法为“??”，意思是“如果左侧的值为null 或undefined，则应用右侧的值”。在代码中，如果 newTitle 未定义，则应用 document.title，如果document.title 也未定义，则应用null。这个运算符能够用于简化代码中的条件判断。

另外，useTitle的类型定义中还应用到了 TypeScript 中的 MaybeRef 类型，它能够是 string 类型或 Ref<string> 类型。其中 Ref<T> 是一个带有 T 类型值的 ref。

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

useCssVar容许咱们获取到 CSS 变量的值并在应用程序中应用它。和 useTitle 不同的是，咱们须要传入一个 string 类型的值，来查问对应 DOM 下面的 CSS 变量。通过 unref 办法，来解决传入的变量 – string类型或者是一个ref：

// 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 中很多组合式办法都应用了这个模式，如果你想深入研究的话，抉择一个感兴趣的去看它的源码吧。

本篇咱们次要介绍了 Vue.js 中的可组合函数（composables）的第二个模式。该模式应用 ref 和unref函数来更灵便地应用参数，使可组合函数可能适应不同的应用状况。还介绍了 VueUse 库如何实现这种模式，并举例说明了 useTitle 和 useCssVar 可组合函数如何应用 ref 和 unref 函数。

下一篇中，咱们将会介绍另一种模式，该模式能够依据须要返回单个值或对象，从而使可组合函数更易于应用。该模式能够使可组合函数更简略易用，尤其是在大多数状况下只须要单个值的状况下。

// Returns a single value 
const isDark = useDark(); 

// Returns an object of values 
const { 
    counter, 
    pause, 
    resume, 
} = useInterval(1000, { controls: true});

原文链接：# Coding Better Composables (2/5)

正文完