computed、watch

export function computed(getterOrOptions) {
    let getter;
    let setter;
    if(isFuncction(getterOrOptions)) {
        getter = getterOrOptions;
        setter = () => { console.log('不能修改')}
    }else {
        getter= getterOrOptions.get
        setter = getterOrOptions.set
    }
    return new ComputedRefImpl(getter, setter)
}

class ComputedRefImpl {
    public _value;
    public _dirty = true;
    public effect;
    
    constructor(public getter, public seetter) {
        this.effect = effect(getter, { // 计算属性默认会产生一个 effect
            lazy: true,// 默认不执行
            scheduler:() => { // scheduler 是赋值的时候才会走的
                if(!this.dirty) {
                    this.dirty = true
                    trigger(this, TriggerOpTypes.SET, 'value')
                }
            }
        })
    }
    get value() {
        if(this._dirty) {
            this._value = this.effect(); // 会将用户的返回值返回
            this._dirty = false
        }
        track(this, TrackOpTypes.GET, 'value') // 收集依赖的 effect 是什么？
        
        return this._value;
    }
    set value(newValue) {
        this.setter(newValue)
    }
    
}
const state = reactive({age: 1})
const cAge = computed(() => {
    return state.age + 10
})
console.log(cAge.value) // 11
console.log(cAge.value)// 11
state.age = 2; // 此时会执行 scheduler, this.dirty = true
console.log(cAge.value) // 重新计算 12

effect(() => {
    cAge.value // 访问这个 计算属性的 value 值的时候，需要进行一下依赖收集，这样下面改 state.age = 3 时，cAge.value
})

state.age = 3; // 此时 cAge.value 需要改变 添加依赖收集和更新