你想要的 vue 源码分析 · 22

图片来自：https://ustbhuangyi.github.io/vue-analysis/reactive/summary.html

1. 核心去观测数据的变化，当数据变化以后，能通知对应的观察者，来实行相关的逻辑
2. Dep 的实现是最核心，实际上连接数据与对应观察者的桥梁
3. Vue 初始化的时候，对不同指令对应的属性做处理，对于 data 和 props，会通过 observer 和 defineReactive 等一系列操作，把整个 data 和 props 定义的对象每一个属性变成响应式属性，同时内部设置一个 Dep 实例
4. 当访问这些数据的时候，会触发 Dep.depend 来收集依赖，收集依赖是收集当前正在计算 watcher（dep.target）作为订阅者来订阅这些数据变化
5. 当修改这些数据，会调用 dep.notify 来通知订阅者做 update 逻辑
6. 对于 computed 这个属性，内部会创建 computed watcher，每一个 computed watcher 会持有 Dep 实例，访问 computed 属性，会调用 computed evaluate 一个计算方法， 这时候会触发内部持有 dep.depend 去收集依赖，也会收集正在计算的 watcher，把这些 watcher 作为订阅者收集起来，作用是当计算属性依赖值发生变化，触发 computed watcher 重新计算，当计算结果变了，调用 dep.notify，通知 computed 订阅者，触发他们更新
7. 对于 watcher 来说，会创建一个 user watcher（用户自定义 watcher），会观察 data 和计算属性变化，会创建一个 watcher 去观察 data 和计算属性变化，如果发生变化，通知 Dep 去遍历所有的 user watcher，来触发 dep.update，然后判断新旧值发生变化，就调用 user watcher 的 run 方法，执行用户定义的回调函数
8. 数据渲染过程与数据重新渲染是基于响应式系统，Vue 创建过程中会对每一个组件，会执行组件的 mount 方法，内部会创建唯一的 render watcher，在执行 render（去渲染成 vnode 过程中），会访问到 data 中定义的数据或者计算属性，render watcher 作为一个订阅者，订阅了数据与计算属性的变化，一旦发生变化，会触发 setter.notigy，computed watcher 中的 notify，然后触发 render watcher 的 update，然后执行 render watcher 的 run 方法，最终调用 updateComponent，这个方法会重新做一次渲染。
9. 基于响应式原理，实现数据变化，刷新页面的效果

抽象分析 data/props 的响应式

1. Vue 初始化会把 data 或者 props 中定义的属性变成响应式的，并创建一个 Dep 实例
2. 当访问这些数据的时候，会触发 Dep.depend 来收集 正在计算的 watcher(dep.target) 作为订阅者
3. 当修改数据的时候会调用 dep.notify 来通知订阅者

抽象分析 computed 的响应式

1. 对于 computed 属性，内部有一个 computed watcher，
2. 当访问 computed 属性的时候，会调用 dep.depend 来收集 computed watcher 作为订阅者
3. 当计算属性发生变化的时候，当计算结果发生变化，会触发 dep.notify 来通知订阅者

抽象分析 user watch 的响应式

1. 对于 watcher 来说，会创建一个 user watcher，
2. 会观察 data 或者计算属性的变化，如果发生变化，会遍历所有的 user watcher 来触发 update
3. 然后判断新旧值变化，如果确实变化了，执行 user watcher 的 run 方法，执行回调函数操作

抽象分析 组件的响应式

1. 对于组件来说，每一个组件的初始化内部都有一个 render watcher，
2. 在执行 render 过程中 会访问到 data 或者计算属性的值
3. 如果发生变化，会触发 setter.notify 或者 computed 的 notify，然后触发 render watcher 的 update
4. 执行 render watcher 的 run 方法，最终调用 updateComponent，来重新渲染