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函数,重新走一遍收集依赖的流程。
因为同一份依赖收集过,所以不会收集重复的依赖