Vue 响应式原理 vue-reactive 核心实现类: Observer : 它的作用是给对象的属性添加 getter 和 setter,用于依赖收集和派发更新 Dep : 用于收集当前响应式对象的依赖关系,每个响应式对象包括子对象都拥有一个 Dep 实例(里面 subs 是 Watcher 实例数组),当数据有变更时,会通过 dep.notify()通知各个 watcher。 Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher(user watcher)三种 Watcher 和 Dep 的关系 watcher 中实例化了 dep 并向 dep.subs 中添加了订阅者,dep 通过 notify 遍历了 dep.subs 通知每个 watcher 更新。 依赖收集 1.initState 时,对 computed 属性初始化时,触发 computed watcher 依赖收集 2.initState 时,对侦听属性初始化时,触发 user watcher 依赖收集 3.render()的过程,触发 render watcher 依赖收集 4.re-render 时,vm.render()再次执行,会移除所有 subs 中的 watcer