【源码】vue2 变化侦测与异步更新源码刨析

【公司内部分享】探索Vue.js框架内部原理和实现机制，旨在理解其核心概念和技术细节，以便更好地应用和定制Vue.js。

相关文章

• vue3 为什么说渲染、更新更快、内存占用更少
• vue3 为什么说打包体积更小
• vue3 为什么说跨平台能力更强
• vue2 项目结构与架构设计介绍
• vue2 变化侦测与异步更新源码刨析
• vue2 模板编译源码刨析
• vue2 patch源码刨析
• vuex4 源码浅析

环境

• vue：v2.6.1

vue2 变化侦测与异步更新源码刨析

---

一、什么是变化侦测

1、什么是变化侦测

运行时应用的内部状态发生变化，此时需要进行重新渲染，确认状态发生变化的这个过程叫变化侦测

2、变化侦测的类型

• 拉：Angular、React => 不知道具体哪个状态变化了、只知道可能变了，通过比较引用确认是否需要render
• 推：Vue => 当状态发生变化时、马上可以知道、一定程度上可以知道那些状态变了、可减少无效render

3、Vue侦测粒度

• Vue1.x：依赖绑定节点、精准更新
• Vue2.x：依赖绑定组件、引入虚拟DOM、降低了依赖数量、通过diff确认更新、减小了内存开销

二、Object的变化侦测

基本原理

• 1：核心是在Observer类中通过Object.defineProperty来劫持对象的属性，读取数据触发get函数收集依赖，设置数据触发set函数通知依赖
• 2：Dep负责收集、删除依赖及广播消息
• 3：Watcher是一个观察者，提供了get、update、 addDep等方法
• 4：对于无法侦测属性（如新增、删除），提供$set、$delete处理

三、Array的变化侦测

基本原理

• 1：收集依赖的形式与Object一致，但是通知依赖不同，数组是通过方法改变内容的，故采用拦截数组的原型方法
• 2：对于数组当前每个下标对应的 对象及新增对象变化的侦测，则采用了Object的侦测方式

四、异步更新 – 先聊聊JS事件循环

五、异步更新 – 概念与目的

概念

只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。同时、如果同一个 watcher 被多次触发，只会被推入到队列中一次

目的

既要保证所有的依赖都触发更新，又要保证不触发不必要的Patch，以减小性能消耗

例子

• 同步更新：DIFF ： 101次，Patch：101次
• 异步更新：DIFF ： 1次，Patch：0次

六、异步更新 – 工作流程

七、异步更新 – $nextTick案例分享

• 1：this.count = 1 将产生一个flushSchedulerQueue进入异步任务队列
• 2：this.$nextTick 也是异步任务，所以将和flushSchedulerQueue比较谁先进场、先来先执行
• 3：setTimeout 是宏任务，则要确认timerFunc是什么类型的异步任务，若是微任务则微任务先执行，若是宏任务则比较谁先进场