Vue源码浅读

Vue3上线很久了,一直想花时间看看响应式怎么实现的,和Vue2的思路有区别吗,这周末花了点时间debug和看源码,大概了解了Vue3的更新链路,写个小笔记记录一下,可能有些细节缺失,或者如果有写得不太对的请多包涵

V2版本

在学习Vue3的源码之前,先了解一下Vue2的双向绑定是怎么实现的

V2版本作为Vue的经典版本,引入了多个核心概念:

  • Vue实例:代表着组件的实例化对象。
  • Data:存放在组件内的数据。
  • VNode:作为模板的表现形式。
  • Dep:负责依赖收集,管理Data中的键与Watcher之间的关系。
  • Watcher:监测数据变化的观察器,在数据更新时Dep会通知Watcher进行更新。

V2版本的主要链路可分为以下三个步骤:

链路1. Vue实例初始化

在初始化阶段,Vue会遍历Data中的所有对象,利用Object.defineProperty对对象的键进行代理,从而管理键的get和set方法。每个键会生成一个对应的Dep实例,用于管理依赖关系。

链路2. 挂载(Mount)链路

这一阶段涉及获取Vue实例、生成Watcher实例以及首次执行更新函数updateComponent

源码里,一个vm实例生成一个Watcher实例,并传入更新函数:updateComponent

生成一个Watcher实例之后,构造函数里,会执行一次Watcher的get方法依赖收集的核心逻辑就在这个get方法里

scss 复制代码
pushTarget(this) // 最终是执行Dep.target = this
...
this.getter.call(vm, vm) // 最终会执行组件的render函数
// render函数会获取data,触发Data上的key的get方法,从而触发依赖收集
...
popTarget() // 将Dep.target置为null

执行完之后,最终一个key的Dep实例,会管理一个或者多个Watcher

链路3. 数据更新流程

当数据更新时,会执行到链路1中为键定义的setter方法。此时找到相关的Dep实例,通知关联的Watcher进行更新,Watcher更新,会将watcher放到更新队列中,按队列执行watcher.run(),看到最终会执行watcher的get方法,也会执行收集依赖的逻辑,不过收集依赖是有去重的,不会重复收集

探索V3版本

V3版本对Vue的实现进行了更新和改进,在源码中有一些新的变化。

链路1. 创建Vue实例

在V3版本中,createApp方法生成一个app对象,这个对象在源码里看到不属于任何类,只是定义一个对象和对象上的方法,直接返回

链路2. 数据代理和依赖收集

在V3版本中,使用ref(value)reactive(object)定义数据。每个数据都会生成一个RefImpl实例,利用proxy对数据进行代理,并在内部实现依赖管理。getter方法类似V2版本的Dep,存在track函数用于依赖收集;而setter方法中则调用trigger函数,在数据更新时触发依赖更新。

链路3. 挂载流程

整个链路比较长,大致流程是,第一次会执行到setupStatefulComponent,最终会执行函数的setup方法,但是这时候没有进行依赖收集

继续往下看,执行到setupRenderEffect,可以看到每个组件实例都会生成一个ReactiveEffect实例,会执行ReactiveEffect实例的run方法,依赖收集的核心逻辑就在这个run方法

arduino 复制代码
// 1、activeEffect赋值this(当前的ReactiveEffect实例),shouldTrack设置为true
// 2、执行`componentUpdateFn`
// 3、执行`renderComponentRoot`,最终会执行到组件的render函数,会使用ref定义的数据
// 4、因为activeEffect有值,并且shouldTrack为true,所以会触发依赖收集
// 5、依赖收集,会将`RefImpl`实例的dep属性和activeEffect做一个关联
// 即一个dep可能会管理多个ReactiveEffect`实例
// 6、依赖收集会去重

链路4. 数据更新流程

当有数据更新的时候,会触发RefImpl实例value的setter方法,取出对应的dep记录的effect,最终执行effect.scheduler()或者effect.run(),这两个方法最终都会执行componentUpdateFn函数,执行组件的render函数,重新走一遍收集依赖的流程。

因为同一份依赖收集过,所以不会收集重复的依赖

相关推荐
web行路人24 分钟前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00125 分钟前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
子非鱼92143 分钟前
【Ajax】跨域
javascript·ajax·cors·jsonp
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
嚣张农民1 小时前
推荐3个实用的760°全景框架
前端·vue.js·程序员
周亚鑫2 小时前
vue3 pdf base64转成文件流打开
前端·javascript·pdf
落魄小二2 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
y5236482 小时前
Javascript监控元素样式变化
开发语言·javascript·ecmascript
fruge2 小时前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia2 小时前
vue中如何关闭eslint检测?
前端·javascript·vue.js