SOURCE

function reactive(target) {

    const handler = {
        get(target, key, receiver) {
            // 收集依赖
            track(target, key)
            return Reflect.get(target, key, receiver)
        },
        set(target, key, value, receiver) {
            const oldValue = Reflect.get(target, key, receiver)
            let result = true
            if (oldValue != value) {
                result = Reflect.set(target, key, value, receiver)
                // 触发更新
                trigger(target, key)
            }
            return result
        },
        deleteProperty(target, key, receiver) {
            trigger(target, key)
            // 触发更新
            return Reflect.deleteProperty(target, key, receiver)
        }
    }

    return new Proxy(target, handler)

}

let activeCallBack = null
function effect(callback) {
    activeCallBack = callback
    callback && callback()
    activeCallBack = null
}
const trackMaps = new WeakMap()
function track(target, key) {
    if (!trackMaps.get(target)) {
        let depsMap = new Map()
        trackMaps.set(target, depsMap)
    }
    depsMap = trackMaps.get(target)
    if (!depsMap.get(key)) {
        let dep = new Set()
        depsMap.set(key, dep)
    }
    dep = depsMap.get(key)
    dep.add(activeCallBack)
}

function trigger(target, key) {
    let depsMap = trackMaps.get(target)
    let dep = depsMap.get(key)
    dep.forEach(d => {
        d && d()
    })
}


let p = {
    price: 100,
    num: 3
}
const pp = new reactive(p)
let total = 0
effect(() => {
    console.log("触发更新")
    total = pp.price * pp.num
})
console.log(total)
pp.price = 200
console.log(total)
pp.num = 1
console.log(total)

console.log("====================")

function ref(raw){
    if(raw._is_ref_){
        return raw
    }
    let value = raw
    const r = {
        _is_ref_:true,
        get value(){
            track(r,"val")
            return value
        },
        set value(newVal){
            value = newVal
            raw.value = newVal
            trigger(r,"val")
        }
    }
    return r
}

let price = ref(100)
let num = ref(1)
let  total1 = 0
effect(() => {
    console.log("触发更新")
    total1 = price.value * num.value
})
console.log(total1)
price.value = 200
console.log(total1)
num.value = 2
console.log(total1)