实现vue响应式的几个重要角色
- Observer ：数据劫持 利用Object.defineProperty遍历操作对象 为对象的每一个属性加上getter和setter方法 访问属性时触发getter 设置属性时触发setter
- Dep ：会为对象属性添加一个Dep实例对象 初始化一个subs数组 用于收集属性对应的Watcher
- Watcher ：依赖属性的地方会生成一个Watcher实例对象，并加入到属性的Dep对象上 例如render函数 computed函数 watch函数
发布者-订阅模式
- 订阅：触发属性getter时 会触发Dep.addSub 添加对应Watcher到对应Dep中
- 发布：触发属性setter时 会触发Dep.notify 通知对应Dep里的所有Watcher进行更新
Tips：
触发settet后 Dep通知watcher需要更新 为了避免同一个Watcher频繁触发更新 此时Watcher的更新操作并不是同步执行的 而是会将更新操作加入微任务队列 并且同一个Watcher只会存在一次 它的执行是通过$nextTick执行的 nextTick的具体做法是通过Promise完成的
nextTick((fn)=>{
Promise.resolve().then(fn);//通过这种方式就跑到微队列中去了
})
