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

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

相关推荐
醉の虾15 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧24 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
chusheng184037 分钟前
Java项目-基于SpringBoot+vue的租房网站设计与实现
java·vue.js·spring boot·租房·租房网站
游走于计算机中摆烂的1 小时前
启动前后端分离项目笔记
java·vue.js·笔记
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒1 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
码蜂窝编程官方2 小时前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
乐闻x3 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚3 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单