Vue 3 中 Ref 的全面指南

基础类型的响应性

在 Vue 3 中，我们可以通过 reactive 来实现引用类型的响应性，那么基础类型的响应性如何实现呢？可能你会想到这样来实现：

const count = ref(0)

这么做确实可以实现，而且也很像 ref。但是，这种方式有一个问题，那就是它无法跟踪状态变化。如果我们想在状态变化时执行某些操作，就必须使用 watch 函数来监听状态的变化。

Ref 的使用

Ref 的使用非常简单，只需要在需要使用的地方使用 ref 属性即可。例如，如果我们想获取一个 DOM 元素的引用，可以在该元素上使用 ref 属性，如下所示：

<template>
  <input ref="input" />
</template>

<script>
  export default {
    setup() {
      const input = ref(null)
      return {
        input
      }
    }
  }
</script>

在上面的代码中，我们在 input 元素上使用了 ref 属性，并将该元素的引用赋给了 input 变量。这样，我们就可以在组件中使用 input 变量来获取 input 元素的引用。

Ref 的相关函数

Ref 还提供了一些相关函数，这些函数可以帮助我们更好地使用 ref。这些函数包括：

• unref() ：将 ref 的值转换为普通值。
• toRef() ：将普通值转换为 ref。
• isRef() ：判断一个值是否为 ref。

计算属性

计算属性是 Vue 3 中的一个新特性，它可以帮助我们缓存计算结果，从而提高性能。计算属性的语法如下：

computed: {
  fullName() {
    return this.firstName + ' ' + this.lastName
  }
}

在上面的代码中，我们定义了一个名为 fullName 的计算属性，该属性将 firstName 和 lastName 属性的值连接起来。计算属性 fullName 会在 firstName 或 lastName 属性的值发生变化时自动重新计算。

计算属性缓存

计算属性还有一个非常有用的特性，那就是计算属性缓存。默认情况下，计算属性的值会在每次组件重新渲染时重新计算。但是，我们可以使用 cache 标志来缓存计算属性的值。这样，计算属性的值只会