重学 vue3 中的 computed

computed() 计算属性

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

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

const count = ref(1)
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value) // 2

doubleCount.value++ // 错误

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

const count = ref(1)
const doubleCount = computed({
  get: () => count.value * 2,
  set: (val) => {
    // val doubleCount.value = 5 赋值的值，也就是5
    count.value = val - 1
  }
})

// 只有computed计算出来的值，被赋值时，computed中的set属性定义的函数，才会被执行
doubleCount.value = 5
console.log(count.value) // 4
console.log(doubleCount.value) // 8

计算属性的特性（缓存性，自动更新依赖性）

计算属性值会基于其响应式依赖被缓存。

Vue 的计算属性会自动追踪响应式依赖，一个计算属性仅会在其响应式依赖更新时才重新计算。

基于响应式依赖，自动更新计算

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

count.value++ // computed依赖的响应式数据发生了变化
console.log(plusOne.value) // 3

基于非响应式依赖，computed 不会自动更新

let count = 1;
const doubleCount = computed(() => count * 2);

console.log(doubleCount.value); // 2

count++;
console.log(doubleCount.value); // 2

count = count * 2;
console.log(doubleCount.value); // 2

注意！！注意！！注意！！

computed 属性在 Vue 中是惰性计算的。这意味着它不会在定义时立即执行计算，而是在你首次访问 computed 属性的值时才会进行计算。
计算的结果会被缓存，除非其依赖的响应式数据发生变化，否则在后续的访问中会直接使用缓存的值，不会重新计算。

let count = 1;
const doubleCount = computed(() => count * 2);

count++;

count = count * 2;
// 首次访问 doubleCount computed 属性的值时才会进行计算。
console.log(doubleCount.value); // 8

let count = 1;
const doubleCount = computed(() => count * 2);
// 首次访问
console.log(doubleCount.value); // 2

count++;
// 之后无论 count 怎么变化，doubleCount 都不会发生变化了
console.log(doubleCount.value); // 2

count = count * 2;
// 之后无论 count 怎么变化，doubleCount 都不会发生变化了
console.log(doubleCount.value); // 2