Vue.js中的computed功能设计

const obj = new reactive({foo: 1, bar: 2})
// 使用计算属性获取值
const value = computed(() => {obj.foo + obj.bar})
// 使用方法获取值
const value = () => obj.foo + obj.bar

effect(() => {
    return obj.foo + obj.bar
}, {
	// 调度器中设置lazy标记
    lazy: true
})
function effect(fn, options = {}) {
    const effectFn = () => {
      	// 省略代码
    }
    effectFn.options = options
    effectFn.deps = []
	// 如过有缓存标记则直接返回
    if(options.lazy)
        return effectFn
    effectFn()
}
function computed(getter) {
    // 把getter作为一个副作用函数
    const effectFn = effect(getter, {
        lazy: true,
    })
    const obj = {
        // 只有当读取到value时才会触发effectFn
        get value() {
            return effectFn()
        }
    }
    return obj.value
}

const sum = computed(() => obj.foo + obj.bar)
console.log(sum.value)
console.log(sum.value)
console.log(sum.value)

function computed(getter) {
    // 用来缓存计算的结果
    let value
    // 用于标记是否需要重新计算值
    let dirty = true
    let effectFn = effect(getter, {
        lazy: true
    }) 
    const obj = {
        get value() {
            // 如过需要重新计算值
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            return value
        }
    }
    return obj
}

function computed(getter) {
    // 用来缓存计算的结果
    let value
    // 用于标记是否需要重新计算值
    let dirty = true
    let effectFn = effect(getter, {
        lazy: true,
        // 当响应式数据修改时，触发副作用函数时修改dirty的值
        scheduler: () => {
            dirty = true
        }
    }) 
    const obj = {
        get value() {
            // 如过需要重新计算值
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            return value
        }
    }
    return obj
}

// 省略代码......
const sum = computed(() => obj.foo + obj.bar)
effect(() => {
    console.log(sum.value)
})

function computed(getter) {
    let value
    let dirty = true
    const effectFn = effect(getter, {
        lazy: true,
        scheduler: () => {
            dirty = true
            // 计算属性依赖的响应式数据发生改变时，手动触发响应
            trigger(obj, 'value')
        }
    })
    const obj = {
        get value() {
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            // 读取value时手动追踪
            track(obj, 'value')
            return value
        }
    }
    return obj
}