vue3 中 computed 新用法示例小结

下面是关于"vue3 中 computed 新用法示例小结"的完整攻略：

什么是 computed

在 Vue.js 中，我们可以通过计算属性来简化模板中的表达式，避免过多的逻辑计算，提高代码可维护性。computed 可以自动监听依赖变化，只有当依赖的值发生变化时，才会重新计算返回值。

在 Vue.js 3.0 中，computed 有了几个新的方法和特性，下面我们来了解一下。

新用法示例

示例一：使用 ref 创建计算属性

在 Vue.js 3.0 中，我们可以使用 ref 函数来创建一个响应式对象，它与 Vue.js 2.x 中的 data 类似，可以实现双向绑定。除了创建响应式数据， ref 还可以创建计算属性。

<template>
  <div>
    <input v-model="name" />
    <p>Hello, {{ fullName }}</p>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const name = ref('')
    const fullName = computed(() => {
      return `Mr.${name.value}`
    })
    return {
      name,
      fullName
    }
  }
}
</script>

在上面的例子中，我们使用 ref 函数创建了一个名为 name 的响应式对象，它用于存储用户输入的名字。然后，我们使用 computed 函数创建了一个计算属性 fullName，当 name 发生变化时 fullName 会自动重新计算。

示例二：使用参数重载的 computed 函数

在 Vue.js 3.0 中，computed 函数还支持参数重载，具体如下：

computed(getter: () => any)
computed<T>(options: ComputedOptions<T>)

第一种方式与 Vue.js 2.x 中常用的方式相同，只需要传入一个计算函数即可。第二种方式可以通过对象传递额外的选项，例如：

const count = ref(0)

const plusOne = computed({
  get: () => count.value + 1,
  set: val => {
    count.value = val - 1
  }
})

在上面的例子中，我们创建了一个名为 count 的响应式对象，和使用 computed 函数创建了一个计算属性 plusOne。当读取 plusOne 值时，它会返回 count 的值加 1，当设置 plusOne 值时，它会将新的值减去 1 并赋值给 count 对象。