概述

vue3中的computed函数相当于vue2中的computed，也是一个用于创建计算属性的函数，计算属性是基于响应式数据派生出来的数据，它们会根据其依赖的响应式数据自动跟新

computed注意事项

• 惰性求值:计算属性是惰性求值的，只有实际访问其值时才会执行计算函数

• 自动依赖追踪:即其依赖的响应式数据发函俄国变化时，函数会被执行，计算属性会自动更新

• 缓存：计算属性会缓存其返回的值

computed实现原理

computed接收一个函数作为参数，内部通过ComputedRefImpl构造一个实例并返回

ComputedRefImpl类

ComputedRefImpl类伪代码实现如下,其中会调用ReactiveEffect，生成一个effect实例，并挂载到this上,定义get和set方法，一般而言get方法会更实用，在其中分别调用triggerRefValue和triggerRefValue,用于触发依赖和收集依赖。

class ComputedRefImpl {
  constructor(getter) {
    this.getter = getter;
    this.effect = new ReactiveEffect(
      () => getter(this._value),
      () => {
        triggerRefValue(this, this.effect._dirtyLevel === 2 ? 2 : 3);
      }
    );
  }
  get value() {
    const self = toRaw(this);
    if (
      (!self._cacheable || self.effect.dirty) &&
      shared.hasChanged(self._value, (self._value = self.effect.run()))
    ) {
      triggerRefValue(self, 4);
    }
    trackRefValue(self);
    if (self.effect._dirtyLevel >= 2) {
      triggerRefValue(self, 2);
    }
    return self._value;
  }
  set value(newValue) {
    this._setter(newValue);
  }
}