vue3的computed.ts
import { effect } from './effect';
class ComputedRefImpl {
public _dirty = true;
public _value;
public effect;
constructor(getter, public setter) { //ts中默认不会挂在this上
this.effect = effect(() => { //计算属性 默认会产生一个effect
}, {
lazy: true, //默认不执行
scheduler: () => {
if (!this._dirty) {
this._dirty = true;
trigger(this, TriggerOrTypes.SET, 'value');
}
}
});
}
get value() { //计算属性也要收集依赖
if (this._dirty) {
this._value = this.effect(); //会将用户的返回值 返回
this._dirty = false;
}
track(this, TrackOpTypes.GET, 'value');
return this._value;
}
set value(newValue) {
this.setter(newValue);
}
}
// vue2和vue3 的computed原理是不一样的
export function computed(getterOrOptions) {
let setter;
let getter;
if (Function(getterOrOptions)) {
getter = getterOrOptions;
setter = () => {
console.warn('computed value must be readonly ')
}
} else {
getter = getterOrOptions.get;
setter = getterOrOptions.set;
}
return new ComputedRefImpl(getter, setter);
}
// 缓存就靠dirty来的.
// 调试collectionHandlers ref 的api和computed