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函数,重新走一遍收集依赖的流程。

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

相关推荐
ch_s_t几秒前
基于 Express+JWT + Vue 的前后端分离架构
vue.js·架构·express
前端青山2 小时前
Node.js + MongoDB + Vue 3 全栈应用项目开发
开发语言·前端·javascript·vue.js·mongodb·node.js
pixle02 小时前
vue3实现一个无缝衔接、滚动平滑的列表自动滚屏效果,支持鼠标移入停止移出滚动
javascript·vue.js·vue
xiangzhihong82 小时前
React Native 全新架构来了
javascript·react native·react.js
aikongmeng2 小时前
React native Text Webview 处理字体大小的变化
javascript·react native·react.js
wakangda2 小时前
React Native WebView 进阶:实现带回调函数的通讯
javascript·react native·react.js
花花鱼3 小时前
ts 将100个元素,每行显示9个元素,然后显示出所有行的元素,由此我们延伸出一个项目需求的简单算法实现。
vue.js
天农学子3 小时前
input file检验成功之后才可以点击
javascript·html·easyui
王哲晓3 小时前
第三十六章 Vue之路由重定向/404页面设置/路径模式设置
前端·vue.js