重学 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

computed 计算属性 最佳实践

Getter 不应有副作用

计算属性的 getter 应只做计算而没有任何其他的副作用，这一点非常重要，请务必牢记。
举例来说，不要改变其他状态、不要在 getter 中做异步请求或者更改 DOM！
一个计算属性的声明中描述的是如何根据其他值派生一个值。因此 getter 的职责应该仅为计算和返回该值。

避免直接修改计算属性值

从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。
更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改。
应该更新它所依赖的源状态以触发新的计算。