在计算属性被查看时，将callback赋值给Dep.target，接下来就会调用其所依赖属性的getter，我们只要在getter里把callback给收集起来就行了。接下来修改依赖属性的getter方法。
defineReactive(obj, prop, val) { let dep = new Dep() Object.defineProperty(obj, prop, { get() { console.log(`${prop} - 被读取！`) dep.getDeps() // 依赖收集 return val }, set(newVal) { if (newVal == val) return val = newVal console.log(`${prop} - 被修改！`) } }) }
这时watcher的callback都被依赖属性给收集起来了，当依赖属性发生变化时只要去运行这些callback就可以了。接下来就是修改依赖属性的setter方法。
defineReactive(obj, prop, val) { let dep = new Dep() Object.defineProperty(obj, prop, { get() { console.log(`${prop} - 被读取！`) dep.getDeps() return val }, set(newVal) { if (newVal == val) return val = newVal console.log(`${prop} - 被修改！`) dep.notify() // 运行所有callback } }) }
运行看看
我们加多一个Watcher试试
new Watcher(man, 'isGreat', () => { let {height, weight, wealth} = man if (height > 180 && weight > 70 && wealth > 100000) return 'Great!' return 'not good enough ...' }, () => { console.log(`they say i am ${man.isGreat}`) })
这就是vue中的一个依赖对应多个Watcher