Vue源码 深入响应式原理 （七）原理图总结

Vue源码 深入响应式原理 （七）原理图总结

学习内容和文章内容来自 黄轶老师
黄轶老师的慕课网视频教程地址:《Vue.js2.0 源码揭秘》、
黄轶老师拉钩教育教程地址:《Vue.js 3.0 核心源码解析》
这里分析的源码是Runtime + Compiler 的 Vue.js
调试代码在:node_modules\vue\dist\vue.esm.js 里添加
vue版本:Vue.js 2.5.17-beta

你越是认真生活，你的生活就会越美好——弗兰克·劳埃德·莱特
《人生果实》经典语录

点击回到 Vue源码学习完整目录

Vue的响应式原理
核心是观测数据变化，当数据变化后，通知对应的观察者，来执行相关的逻辑
其中最核心的是Dep的实现，Dep是连接数据和对应观察者的桥梁

在Vue的初始化过程中，会对不同Vue实例上定义的属性做一些处理

• 对于data和props，会通过observe方法，然后通过defineReactive方法把data和props对象里每一个对象属性都变成响应式，同时他们内部会持有一个Dep实例，当我们去访问(getter)他们时，就会触发Dep的depend方法来收集依赖，对应的订阅者是当前正在计算的Watcher，也就是.dep.target，这些订阅者会订阅这些数据的变化，当我们修改这些响应式属性时，dep的notify方法就会通知对应的订阅者来执行update相关的逻辑

• 对于computed，内部会创建一个computed watcher，每个computed watcher都会持有一个dep实例，当我们访问computed时，就会触发dep的depend方法收集依赖，对应的订阅者是当前正在计算的Watcher，也就是.dep.target，这些订阅者会订阅这些数据的变化，当computed依赖的值发生了变化，会触发computed watcher重新计算，如果计算的值变化了，就会触发dep的notify方法，通知对应的订阅者来执行update相关的逻辑

• 对于watcher，会创建user watcher，也就是用户自定义的watcher，可以观测data，计算属性等的变化，当观测的数据发生变化就会通知Dep，Dep去遍历调用user watcher，执行watcher的update方法，当新旧值不同时，就会触发wacher的run方法去执行用户定义的watcher里的回调函数

Vue还有很重要的过程，数据渲染包括数据变化后的重新渲染，渲染基于响应系统，在Vue的创建过程中，对每一个组件来讲，都会执行组件的mount方法，mount的过程内部会创建一个唯一的render watcher，在执行render过程中，也就是创建VNode的过程中，会访问到data，computed定义的属性，收集依赖，render watcher作为订阅者，订阅组件里的data，computed等属性的变化，当数据发生变化时就会触发dep的notify方法，进而触发render watcher的update方法，进而执行run方法，run方法里最终会调用updateComponent方法，重新做渲染

Vue源码学习目录

组件化 （一） createComponent
组件化 （二） patch
组件化 （三） 合并配置
组件化 （四） 生命周期
组件化（五） 组件注册
深入响应式原理（一） 响应式对象
深入响应式原理 （二）依赖收集 & 派发更新
深入响应式原理 （三）nextTick & 检测变化的注意事项
深入响应式原理 （四）计算属性 VS 侦听属性
深入响应式原理 （五）深入响应式原理 （五）组件更新
Vue源码 深入响应式原理 （六）Props (v2.6.11)

点击回到 Vue源码学习完整目录

---

谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强