const obj = new reactive({foo: 1, bar: 2})
// 使用計(jì)算屬性獲取值
const value = computed(() => {obj.foo + obj.bar})
// 使用方法獲取值
const value = () => obj.foo + obj.bar

effect(() => {
    return obj.foo + obj.bar
}, {
	// 調(diào)度器中設(shè)置lazy標(biāo)記
    lazy: true
})
function effect(fn, options = {}) {
    const effectFn = () => {
      	// 省略代碼
    }
    effectFn.options = options
    effectFn.deps = []
	// 如過(guò)有緩存標(biāo)記則直接返回
    if(options.lazy)
        return effectFn
    effectFn()
}
function computed(getter) {
    // 把getter作為一個(gè)副作用函數(shù)
    const effectFn = effect(getter, {
        lazy: true,
    })
    const obj = {
        // 只有當(dāng)讀取到value時(shí)才會(huì)觸發(fā)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) {
    // 用來(lái)緩存計(jì)算的結(jié)果
    let value
    // 用于標(biāo)記是否需要重新計(jì)算值
    let dirty = true
    let effectFn = effect(getter, {
        lazy: true
    }) 
    const obj = {
        get value() {
            // 如過(guò)需要重新計(jì)算值
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            return value
        }
    }
    return obj
}

function computed(getter) {
    // 用來(lái)緩存計(jì)算的結(jié)果
    let value
    // 用于標(biāo)記是否需要重新計(jì)算值
    let dirty = true
    let effectFn = effect(getter, {
        lazy: true,
        // 當(dāng)響應(yīng)式數(shù)據(jù)修改時(shí)，觸發(fā)副作用函數(shù)時(shí)修改dirty的值
        scheduler: () => {
            dirty = true
        }
    }) 
    const obj = {
        get value() {
            // 如過(guò)需要重新計(jì)算值
            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
            // 計(jì)算屬性依賴(lài)的響應(yīng)式數(shù)據(jù)發(fā)生改變時(shí)，手動(dòng)觸發(fā)響應(yīng)
            trigger(obj, 'value')
        }
    })
    const obj = {
        get value() {
            if(dirty) {
                value = effectFn()
                dirty = false
            }
            // 讀取value時(shí)手動(dòng)追蹤
            track(obj, 'value')
            return value
        }
    }
    return obj
}