Vue3computed初始化获取设置值实现示例

export default {
    components: {
    },
    computed: {
        people() {
            return '这个人' + this.age + '岁'
        }
    },
    watch() {
    },
    data() {
        return {
            age: 1
        }
    }
} 

const count = ref(1) const plusOne = computed(() => count.value + 1) // 只读属性
console.log(plusOne.value) // 2

 <div id="app"></div>
<!-- <script src="./Reactivity.global.js"></script> -->
    <script src="../../../../node_modules/@vue/reactivity/dist//reactivity.global.js"></script>
 <script>
     const { reactive, effect, computed } = VueReactivity
     const author = reactive({
         name: 'clying',
         sex: '女'
     })
     // 用法一：
     // const introduction = computed({ // 调用的是defineProperty 中的 
     //     // getter
     //     get() {
     //         console.log('run get');
     //         return author.name + '是个' + author.sex + '程序员！'
     //     },
     //     // setter
     //     set(newValue) {
     //         // console.log(newValue);
     //         // 注意：我们这里使用的是解构赋值语法
     //         [author.name, author.sex] = newValue.split(' ')
     //     }
     // })
     // 用法二：
     // 一个计算属性 ref
     const introduction = computed(() => {
         console.log('run get');
         return author.name + '是个' + author.sex + '程序员！'
     })
     effect(() => {
         app.innerhtml = introduction.value // computed通过 .value 读取
     })
     introduction.value
     introduction.value
     introduction.value
 </script>

const introduction = computed({ // 调用的是defineProperty 中的 
    // getter
    get() {
        console.log('run get');
        return author.name + '是个' + author.sex + '程序员！'
    },
    // setter
    set(newValue) {
        console.log(newValue);
        // 注意：我们这里使用的是解构赋值语法
        [author.name, author.sex] = newValue.split(' ')
    }
})

export const computed = (getterOrOptions) => {
    let onlyGetter = isFunction(getterOrOptions) // 用户传入的回调
    let getter
    let setter
    if (onlyGetter) {
        getter = getterOrOptions
        setter = () => {
            console.warn('no set');
        }
    } else { // 用户传入的包含get set函数的对象
        getter = getterOrOptions.get
        setter = getterOrOptions.set
    }
    // ref 引用类型 
    return new ComputedRefImpl(getter, setter)
}

class ComputedRefImpl {
    public readonly effect
    private _value// get和set需要使用的同一个值
    constructor(getter, private readonly _setter) {
    }
    get value() {
        return this._value
    }
    set value(newValue) {
        this._setter(newValue)
    }
}

class ComputedRefImpl {
    public readonly effect
    private _value// get和set需要使用的同一个值
    constructor(getter, private readonly _setter) {
        this.effect = new ReactiveEffect(getter, () => { })
    }
    get value() {
        this._value = this.effect.run() // 执行
        return this._value
    }
    set value(newValue) {
        this._setter(newValue)
    }
}

class ComputedRefImpl {
    public readonly effect
    private _value// get和set需要使用的同一个值
    public _dirty = true // 默认应该取值的时候进行计算
    constructor(getter, private readonly _setter) {
        this.effect = new ReactiveEffect(getter, () => {
            //稍后依赖的属性变化 就会执行此调度函数
            if (!this._dirty) {
                this._dirty = true
            }
        })
    }
    get value() {
        if (this._dirty) {
            // 脏数据
            this._dirty = false
            this._value = this.effect.run() // 执行
        }
        return this._value
    }
    set value(newValue) {
        this._setter(newValue)
    }
}

// ComputedRefImpl 类
get value() {
    trackEffects(this.dep || (this.dep = new Set())) // 收集
    if (this._dirty) {
        // 脏数据
        this._dirty = false
        this._value = this.effect.run() // 执行
    }
    return this._value
}

// ComputedRefImpl 类
constructor(getter, private readonly _setter) {
    this.effect = new ReactiveEffect(getter, () => {
        //稍后依赖的属性变化 就会执行此调度函数
        if (!this._dirty) {
            this._dirty = true
            // 触发更新
            triggerEffects(this.dep)
        }
    })
}

export function track(target, type, key) {
    // 收集effect中 属性对应的effect
    if (!activeEffect) return
    let depsMap = targetMap.get(target)
    if (!depsMap) {
        targetMap.set(target, (depsMap = new Map()))
    }
    let dep = depsMap.get(key)
    if (!dep) { depsMap.set(key, (dep = new Set())) }
    // 判断去重 set中是否存在activeEffect
    trackEffects(dep)
}
// 将set存起来
export function trackEffects(dep) {
    if (!activeEffect) return
    let shouldTrack = !dep.has(activeEffect) // 不存在
    if (shouldTrack) {
        dep.add(activeEffect) // 属性记录effect 
        // 反向记录 effect记录哪些属性收集过
        activeEffect.deps.push(dep) // 让activeEffect 记录住对应的dep 稍后清理会用到
    }
}

export function trigger(target, type, key, value, oldValue) {
    // 判断targetMap是否存在target
    // 不存在 直接返回 不需要收集
    // 存在 取depsMap中对应key的effect 执行run
    const depsMap = targetMap.get(target)
    if (!depsMap) return
    let effects = depsMap.get(key)
    if (effects) {
        triggerEffects(effects)
    }
}
export function triggerEffects(effects) {
    effects = [...effects] // effects 中 set结构删除再添加会导致死循环
    effects.forEach(effect => {
        // 在执行effect时，又要执行自己，需要屏蔽自己的effect
        if (effect !== activeEffect) {
            if (effect.scheduler)
                effect.scheduler() // 如果存在自己的调度函数就执行自己的scheduler
            else effect.run() // 否则就执行run
        }
    });
}