响应式对象原理

let data = {price:10,quantity:20};

let total = data.price * data.quantity

let target = ()=>{ total = data.price * data.quantity * 20 }

class Dep {
    constructor() {
        this.subs = []
    }
    depend() {
        if(target && !this.subs.includes(target)){
            this.subs.push(target)
        }
    }
    notify(){
        this.subs.forEach( run => run())
    }
}

Object.keys(data).forEach( prop =>{
    const dep = new Dep();
    let result = data[prop]
    Object.defineProperty(data, prop, {
        get(){
            dep.depend()
            return result
        },
        set(newVal){
            result = newVal
            dep.notify()
        }
    })
})

data.price // 10
total // 200

data.price = 0
total //0

上面的代码我们发现，当data对象属性price变化时,total会自动产生变化，像是vue的响应式对象，对象的属性值变化是可以被检测到，并应用到相关的计算性属性中

image.png

说明：

一、响应式变化对象，会通过Object.definePropery把对象属性写成getter/setter属性
二、当get属性时，会把要应用当前属性的计算的function,写入到一个subs数组中
三、当set属性时，会通知说这个属性已经update，实际上也就是运行subs数组中的所有function，给需要update的对象stored值重新赋值，达到数据更新的目的