Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法

清疚 2022-12-14 09:07 253阅读 0赞

> 想多记录一点东西，好像有点不知道怎么怎么总结了，今天听了完了一节Vue 课程 ，主要关于Vue 异步更新策略 及 虚拟Dom 是 源码的剖析，因为没有太专注可能还得捋一捋，或者全部看完之后再回头看。

**Vue 高效的秘诀是批量异步更新和虚拟DOM**

# Vue批量异步更新策略  #

### 概述 ###

![20201014155218917.png][]

项目中有很多组件，每个组件代表了一个watcher 实例 ，在一个更新周期 指的是事件循环这次的更新周期之内，可能有好多数据都发生变化了，因此也可能会有很多各组件需要更新，那么此时比较好的方法就是把这些组件一起批量的进行更新，全部更新之后在浏览器一下子刷新页面。这样的效果和用户体验都是比较好的。

简要流程图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

以上涉及到几个概念在之前 JS异步机制中也曾学习过 **[JavaScript 知识梳理 \[五\] JS执行机制][JavaScript _ _ JS]，**此处再做简要介绍

事件循环（Event Loop ）：事件循环其实是浏览器的一套工作机制，是浏览器为了协调事件处理，脚本执行，网络请求和渲染等任务而制定的一套工作机制。

宏任务：代表一个离散的，独立的工作单元 **，浏览器在完成一个宏任务，在下一个宏任务执行开始前，会对页面进行重新渲染。**主要包括创建主文档对象，解析HTML，执行主线程JS代码，以及各种事件，如 页面加载，输入，网络事件和定时器等。

微任务：微任务是更小的任务，是当前宏任务执行结束后立即执行的任务。 **如果存在微任务，浏览器会清空微任务之后再重新渲染**。微任务的例子有promise回调函数，DOM 发生变化等。

### VUE 中的具体实现 ###

异步：只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变

更。

批量：如果同一个 watcher 被多次触发，只会被推入到队列中一次。去重对于避免不必要的计算

和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列执行实际工作。

异步策略：Vue 在内部对异步队列尝试使用原生的 Promise.then 、 MutationObserver 和

setImmediate ，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。

Q：vue 源码应该从哪里开始看呢？

A：在 Observer index.js defineReactive 中 ，当数据发生变化 会调用dep.notify() 方法，进行通知更新，其实就是调用dep 肚子中所有的watcher 的update 方法。因此应该从watcher.js中的update 方法开始。

**update() core\\observer\\watcher.js**

**dep.notify()****之后****watcher****执行更新，执行入队操作**

update () {
        /* istanbul ignore else */
        if (this.lazy) {
          this.dirty = true
        } else if (this.sync) {
          this.run()
        } else {
          queueWatcher(this)
        }
      }

**queueWatcher(this):**是把自己入队，在此方法中首先做的是去重，本身不存在才入队，因为 在一个组件里有好多key 可能同时发生变化，但是这个组件对应的watcher 都是一个，所以他只能进去一次。

export function queueWatcher(watcher: Watcher) {
      const id = watcher.id
      // 去重 不存在才入队
      if (has[id] == null) {
        has[id] = true
        if (!flushing) {
          queue.push(watcher)
        } else {
          // if already flushing, splice the watcher based on its id
          // if already past its id, it will be run next immediately.
          let i = queue.length - 1
          while (i > index && queue[i].id > watcher.id) {
            i--
          }
          queue.splice(i + 1, 0, watcher)
        }
        // queue the flush
        if (!waiting) {
          waiting = true
    
          if (process.env.NODE_ENV !== 'production' && !config.async) {
            flushSchedulerQueue()
            return
          }
          // 异步的刷新队列
          nextTick(flushSchedulerQueue)
        }
      }
    }

在入队后执行的代码是 nextTick(flushSchedulerQueue),flushSchedulerQueue 会循环执行肚子里所有的watcher，在nextTick 方法中，异步的函数是timerFunc,在该函数中启动了微任务。

timerFunc = () => {
        // 启动一个微任务
        p.then(flushCallbacks)
        // In problematic UIWebViews, Promise.then doesn't completely break, but
        // it can get stuck in a weird state where callbacks are pushed into the
        // microtask queue but the queue isn't being flushed, until the browser
        // needs to do some other work, e.g. handle a timer. Therefore we can
        // "force" the microtask queue to be flushed by adding an empty timer.
        if (isIOS) setTimeout(noop)
      }

有一些判断 其实在 timerFunc 函数汇总是启动了一个微任务 ，因此在一次宏任务完成之后，在清空微任务的时候就会调用 flushcallbacks ,尝试把队列中的watcher 全部刷新一遍。

### 小测验 ###

以下是一个简单的例子明确看到vue的异步更新。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>异步更新</title>
      <script src="../../dist/vue.min.js"></script>
    </head>
    
    <body>
      <div id="demo">
        <h1>异步更新</h1>
        <p id="p1">{
        {foo}}</p>
      </div>
      <script>
        // 创建实例
        const app = new Vue({
          el: '#demo',
          data: {
            foo: 'ready'
          },
          mounted() {
            setInterval(() => {
              this.foo = Math.random()
              this.foo = Math.random()
              this.foo = Math.random()
              // 异步行为 此时页面的内容是没有变的
              // 以上数据的改变只是让watcher 入队而已，还没有进行dom 的更新，因此体现了 dom 的更新是异步的。那么批量性怎么体现的哪，因为foo 的值 有三次改变 而dom  中最终展示的是第三次的值。
              //   debugger
              console.log('111', p1.innerHTML)
              debugger
              this.$nextTick(() => {
                // 此处才是最新的值  
                console.log('nextTick', p1.innerHTML)
              })
            }, 3000);
          }
        })
    
      </script>
    </body>
    
    </html>

# 虚拟DOM和Diff算法  #

### 概念 ###

虚拟DOM（Virtual DOM ）是对DOM的JS抽象表示，它们是JS对象，能够描述DOM结构和关系，应用的各种状态变化会作用于虚拟DOM，组中映射到DOM上。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1][]

### 体验虚拟DOM ###

vue 中虚拟dom 的patch 用到了snabbdom ,因此自行引入此库进行熟悉使用

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>使用snabbdom 实现dom 更新操作</title>
    </head>
    
    <body>
        <div id="app"></div>
        <script src="node_modules/snabbdom/dist/snabbdom.js"></script>
        <script src="node_modules/snabbdom//dist//snabbdom-style.js"></script>
        <script>
            // 响应式
            const obj = {}
    
            const {
                init,
                h
            } = snabbdom
            // 获取patch 函数 ,对比两个虚拟dom ,执行dom 操作
            const patch = init([
                snabbdom_style.default
            ])
            let vnode // 保存之前旧的虚拟dom
    
    
            function defineReactive(obj, key, val) {
                //对传入obj 进行访问拦截
                // 在每次执行defineReactive 时候，其实形成了一个闭包，因为在内部保留了一个内部作用域的变量 就是value
                Object.defineProperty(obj, key, {
                    get() {
                        console.log('get', key)
                        return val;
                    },
                    set(newVal) {
                        if (newVal !== val) {
                            console.log('set' + key + ":" + newVal)
                            val = newVal
                            // 增加更新函数 因为数据变化要更新到视图上
                            update()
    
                        }
                    }
                })
            }
    
            // 使用虚拟dom 做更新
            function update() {
                // // 以下是最简单的视图更新
                // app.innerText = obj.foo
    
                vnode = patch(vnode, h('div#app', {
                        style: {
                            color: "red"
                        }
                    },
                    obj.foo))
            }
            // defineReactive(obj, 'foo', '')
            // obj.foo = new Date().toLocaleTimeString()
            defineReactive(obj, 'foo', new Date().toLocaleTimeString())
            //执行初始化
            vnode = patch(app, h('div#app', obj.foo)) // 这种方式创建了一个虚拟dom
            console.log(vnode)
    
            setInterval(() => {
                obj.foo = new Date().toLocaleTimeString()
            }, 1000);
        </script>
    </body>
    
    </html>

### 优点 ###

*  虚拟DOM 轻量、快速：当他们发生变化时通过新旧虚拟DOM的比对可以得到最小DOM操作量，从而提升性能

> patch(vnode, h('div\#app', obj.foo))

*  跨平台：将虚拟dom更新转换为不同运行时特殊操作实现跨平台

> const patch = init(\[snabbdom\_style.default\]) 
> 
>  patch(vnode, h('div\#app', \{ style:\{ color:'red'\}\}, obj.foo))

*  兼容性:还可以加入兼容性代码增强操作的兼容性。

### 必要性 （其实该研究研究Vue3.0 了） ###

vue 1.0 中有细粒度的数据变化侦测，它是不需要虚拟 DOM 的，但是细粒度造成了大量开销，这对于大

型项目来说是不可接受的。因此， vue 2.0 选择了中等粒度的解决方案，每一个组件一个 watcher 实例，

这样状态变化时只能通知到组件，再通过引入虚拟 DOM 去进行比对和渲染。

### 整体流程 ###

Q：虚拟DOM相关的源码应该从哪里开始？

A： **mountComponent() core/instance/lifecycle.js**

Q：为什么从这里开始？

A：因为lifecycle.js 文件里定义了一个方法叫做 mountComponent(),在此方法中也就是用户$mount 时，定义了方法updateComponent,而且在下面定义了一个watcher，把定义的updateComponent 方法传进去了，结合之前的梳理，watcher 执行run，执行更新函数的updateComponent方法，内部执行update ，会计算虚拟dom，重新计算更新。

//用户$mount()时，定义updateComponent
        updateComponent = () => {
          vm._update(vm._render(), hydrating)
        }

**\_render core/instance/render.js**

生成虚拟dom ，render()函数计算除了最新的虚拟dom ,update 则是让render 函数计算出来的虚拟dom 变成真实dom 。

**\_update core\\instance\\lifecycle.js**

update负责更新dom，转换vnode为dom

**\_\_patch\_\_() platforms/web/runtime/index.js**

\_\_patch\_\_ 是在平台特有代码中指定的

### patch获取 ###

patch 是 createPatchFunction 的返回值，传递 nodeOps 和 modules 是 web 平台特别实现

export function createPatchFunction(backend) {
      let i, j
      const cbs = {}
    
      const {
        modules,
        nodeOps
      } = backend

**platforms\\web\\runtime\\node-ops.js**

定义各种原生 dom 基础操作方法

**platforms\\web\\runtime\\modules\\index.js**

modules  定义了属性更新实现

整体顺序：

watcher.run() => componentUpdate() => render() => update() => patch()

### patch实现 ###

**patch core\\vdom\\patch.js**

首先进行树级别比较，可能有三种情况：增删改。

new VNode不存在就删；

old VNode不存在就增；

都存在就执行diffff执行更新

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2][]

**patchVnode**

比较两个 VNode ，包括三种类型操作： **属性更新、文本更新、子节点更新**

具体规则如下：

1.  新老节点 **均有** **children** 子节点，则对子节点进行 diffff 操作，调用 **updateChildren**

2.  如果 **老节点没有子节点而新节点有子节点** ，先清空老节点的文本内容，然后为其新增子节点。

3.  当 **新节点没有子节点而老节点有子节点** 的时候，则移除该节点的所有子节点。

4.  当 **新老节点都无子节点** 的时候，只是文本的替换

**updateChildren**

updateChildren 主要作用是用一种较高效的方式比对新旧两个 VNode 的 children 得出最小操作补丁。执

行一个双循环是传统方式， vue 中针对 web 场景特点做了特别的算法优化，我们看图说话：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3][]

在新老两组 VNode 节点的左右头尾两侧都有一个变量标记，在 **遍历过程中这几个变量都会向中间靠拢** 。

当 **oldStartIdx > oldEndIdx** 或者 **newStartIdx > newEndIdx** 时结束循环。

下面是遍历规则：

首先， oldStartVnode 、 oldEndVnode 与 newStartVnode 、 newEndVnode **两两交叉比较** ，共有 4 种比较

方法。

当  oldStartVnode 和 newStartVnode  或者  oldEndVnode 和 newEndVnode  满足 sameVnode ，直接将该

VNode 节点进行 patchVnode 即可，不需再遍历就完成了一次循环。如下图，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 4][]

如果 oldStartVnode 与 newEndVnode 满足 sameVnode 。说明 oldStartVnode 已经跑到了 oldEndVnode后面去了，进行patchVnode 的同时还需要将真实 DOM 节点移动到 oldEndVnode 的后面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 5][]

如果 oldEndVnode 与 newStartVnode 满足 sameVnode ，说明 oldEndVnode 跑到了 oldStartVnode 的前面，进行patchVnode 的同时要将 oldEndVnode 对应 DOM 移动到 oldStartVnode 对应 DOM 的前面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 6][]

如果以上情况均不符合，则在 old VNode 中找与 newStartVnode 满足 sameVnode 的 vnodeToMove ，若存在执行patchVnode ，同时将 vnodeToMove 对应 DOM 移动到 oldStartVnode 对应的 DOM 的前面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 7][]

当然也有可能 newStartVnode 在 old VNode 节点中找不到一致的 key ，或者是即便 key 相同却不是sameVnode，这个时候会调用 createElm 创建一个新的 DOM 节点。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 8][]

至此循环结束，但是我们还需要处理剩下的节点。

当结束时 oldStartIdx > oldEndIdx ，这个时候旧的 VNode 节点已经遍历完了，但是新的节点还没有。说明了新的VNode 节点实际上比老的 VNode 节点多，需要将剩下的 VNode 对应的 DOM 插入到真实 DOM中，此时调用addVnodes （批量调用 createElm 接口）。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 9][]

但是，当结束时 newStartIdx > newEndIdx 时，说明新的 VNode 节点已经遍历完了，但是老的节点还有 剩余，需要从文档中删 的节点删除。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 10][]

精力耗尽 虚拟DOM 这块还在尽量多的理解。

![20201016150103284.jpg][]

> 业精于勤 荒于嬉

[20201014155218917.png]: /images/20221123/02554cc6fca04cb3b0d6c713938f68ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221123/e012e31b145548429b1f33168d2d2641.png
[JavaScript _ _ JS]: https://blog.csdn.net/Sandy_zhi/article/details/107534668
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 1]: /images/20221123/587f8d28e7e2448590fe6a7d43336d31.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 2]: /images/20221123/50e7d759438c43ccbeec1d187531bf82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 3]: /images/20221123/ec589402bb66489b83d994dbae50d668.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 4]: /images/20221123/d90bc90362cc4e9f95a644c9269deadc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 5]: /images/20221123/6f94dbd5c8cf4d0d8ba9c23266938887.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 6]: /images/20221123/5aad48ae83104f9dbaf4e11f4607bd51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 7]: /images/20221123/04626896dcc84e208a659e026252d8f9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 8]: /images/20221123/0f596756d3b94c2fa89f85a7e4312185.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 9]: /images/20221123/ee1ba587a4a44cfc83ed3681d3fe0de9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70 10]: /images/20221123/899d984f86ad462a945a32fdc23c2fc3.png
[20201016150103284.jpg]: /images/20221123/cbf1541824d441e697bc4ca969e1fe52.png