[Vue3]computed原理

Computed原理

不管在是 Vue 2 还是在 Vue 3 中，对 computed 本身的实现原理基本都是一样的。当使用 computed 计算属性时，组件初始化会对每一个计算属性都创建对应的 watcher , 然后在第一次调用自己的 getter 方法时，收集计算属性依赖的所有 data，那么所依赖的 data 会收集这个订阅者同时会针对 computed 中的 key 添加属性描述符创建了独有的 get 方法，当调用计算属性的时候，这个 get 判断 dirty 是否为 true，为真则表示要要重新计算，反之直接返回 value。当依赖的 data 变化的时候回触发数据的 set 方法调用 update() 通知更新，此时会把 dirty 设置成 true，所以 computed 就会重新计算这个值，从而达到动态计算的目的。

理解computed原理其实对应着三个问题：

• computed初始化流程

• 改变computed的依赖值是如何触发computed值改变的

• computed值是如何做到缓存的

computed使用方式

第一种使用方式，接受一个 getter 函数，并根据 getter 的返回值返回一个不可变的响应式 ref 对象。

const count = ref(1)
const a = computed(() => count.value + 1)console.log(a.value) // 2a.value++ // 错误

第二种使用方式，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象。

const count = ref(1)
const a = computed({get: () => count.value + 1,set: val => {count.value = val - 1}
})a.value = 1
console.log(count.value) // 0

computed源码

当调用 computed 方法时，会根据两种调用方式做一下区分，同时调用类 ComputedRefImpl

function computed(getterOrOptions, ...) {let getter;let setter;const onlyGetter = isFunction(getterOrOptions);if (onlyGetter) {getter = getterOrOptions;setter = () => {console.warn('Write operation failed: computed value is readonly');};}else {getter = getterOrOptions.get;setter = getterOrOptions.set;}const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);...return cRef;
}

ComputedRefImpl 类 ：

class ComputedRefImpl {// 初始化constructor(getter, _setter, isReadonly, isSSR) {this._setter = _setter;this.dep = undefined;this.__v_isRef = true;this._dirty = true;this.effect = new ReactiveEffect(getter, () => {if (!this._dirty) {this._dirty = true;triggerRefValue(this);}});this.effect.computed = this;this.effect.active = this._cacheable = !isSSR;// 根据传入是否有setter函数来决定是否只读this["__v_isReadonly" /* IS_READONLY */] = isReadonly;}get value() {const self = toRaw(this);trackRefValue(self);if (self._dirty || !self._cacheable) {self._dirty = false;self._value = self.effect.run();}return self._value;}set value(newValue) {this._setter(newValue);}
}

初始化

ComputedRefImpl 类的第一块就是 computed 的初始化，主要做两件事情：

• 创建 effect 对象，生成 watcher 监听函数并赋值给实例的 effect 属性。将当前 getter 当做监听函数，并附加调度器。
• 设置 computed ref 是否只是可读。设置是否可读的依据是：onlyGetter||!setter

不过单单从构造方法来看其实和 computed 没有太大的关系，只是进行了初始化变量的操作，并创建了一个 ComputedRef 实例赋值给我们的调用。
声明一个 computed 时其实并不会执行 getter 方法，只有在读取 computed 值时才会执行它的 getter 方法，那么接下来要关注 ComputedRefImpl 的 getter 方法。

执行getter方法

第二部分就是 getter 方法的执行，getter 方法会在读取 computed 值的时候执行，而在 getter 方法中有一个叫 _dirty 的变量，它的意思是代表脏数据的开关，默认初始化时 _dirty 被设为 true ，在 getter 方法中表示开关打开，需要计算一遍 computed 的值，然后关闭开关，之后再获取 computed 的值时由于 _dirty 是 false 就不会重新计算。这就是 computed 缓存值的实现原理。

get value() {...if (self._dirty || !self._cacheable) {self._dirty = false;self._value = self.effect.run();}return self._value;
}

那么 computed 是怎么知道要重新计算值的呢？

computed 本身是依赖响应式属性的变化的，如果依赖的响应属性发生改变，会触发 effect 的 scheduler 函数执行。此方法就是 computed 内部依赖的状态变化时会执行的操作。所以最终的流程就是：computed 内部依赖的状态发生改变，执行对应的监听函数，这其中自然会执行 scheduler 里的操作。而在 scheduler 中将 _dirty 设为了 true 。

this.effect = new ReactiveEffect(getter, () => {// effect 的 scheduler 函数执行if (!this._dirty) {this._dirty = true;triggerRefValue(this);}
});

那么computed 是怎么知道内部依赖产生了变化呢？这是由于在我们第一次获取 computed 值（即执行 getter 方法） 的时候对内部依赖进行了访问，在那个时候就对其进行了依赖收集操作，所以 computed 能够知道内部依赖产生了变化。

注意：上面提到的「第一次获取 computed 值」这里是第一次get，而不是初始化 computed。

总结

总结来说，computed在第一次get的时候在内部收集了依赖，并将内部缓存开关设为了false，此后只有在依赖改变的时候，才会将内部缓存开关设为true，从而使computed的值发生改变。