前言

以下文章是我个人学习的输出方式，目的是为了夯实自己的技术基础。

computed()

介绍

接受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

作用

响应式依赖追踪：
computed 属性会自动追踪它所依赖的响应式数据。一旦这些数据发生变化，computed 属性的值也会自动更新；

性能优化：
计算属性是基于缓存的。只有当依赖的响应式数据发生变化时，计算属性才会重新计算，否则它会返回之前缓存的值。这可以避免不必要的计算，提升性能；

简化模板逻辑：
你可以将复杂的计算逻辑放在计算属性中，这样模板中的表达式会变得更简洁、更易读；

简洁的语法：
使用计算属性可以减少模板中的重复代码，使代码更具可维护性；

示例

创建一个只读的计算属性 ref：

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // 错误

创建一个可写的计算属性 ref：

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

plusOne.value = 1
console.log(count.value) // 0