女性门户网站源码两性网站模版女性门户网站整站源码带数据带采集十大网络推广公司

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的值发生改变。