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值重新赋值，达到数据更新的目的
