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的响应式原理
核心是观测数据变化,当数据变化后,通知对应的观察者,来执行相关的逻辑
其中最核心的是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)
谢谢你阅读到了最后~
期待你关注、收藏、评论、点赞~
让我们一起 变得更强