null - 程序员宅基地

Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法_flushschedulerqueue render触发多次-程序员宅基地

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

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

Vue批量异步更新策略

概述

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

简要流程图如下：

以上涉及到几个概念在之前 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上。

体验虚拟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执行更新

patchVnode

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

具体规则如下：

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

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

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

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

updateChildren

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

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

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

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

下面是遍历规则：

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

方法。

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

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

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

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

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

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

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

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

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

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

业精于勤荒于嬉

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/109052273

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

文章浏览阅读15次。空化气泡的大小和相应的空化能量可以通过调整完全标度的振幅水平来操纵和数字控制。通过强调超声技术中的更高通量处理和防止样品污染，Epigentek EpiSonic超声仪可以轻松集成到现有的实验室工作流程中，并且特别适合与表观遗传学和下一代应用的兼容性。Epigentek的EpiSonic已成为一种有效的剪切设备，用于在染色质免疫沉淀技术中制备染色质样品，以及用于下一代测序平台的DNA文库制备。该装置的经济性及其多重样品的能力使其成为每个实验室拥有的经济高效的工具，而不仅仅是核心设施。

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

文章浏览阅读4.2k次，点赞3次，收藏14次。目录点击这里查看所有博文本系列博客，理论上适用于合宙的Air202、Air268、Air720x、Air720S以及最近发布的Air720U（我还没拿到样机，应该也能支持）。先不管支不支持，如果你用的是合宙的模块，那都不妨一试，也许会有意外收获。我使用的是Air720SL模块，如果在其他模块上不能用，那就是底层core固件暂时还没有支持，这里的代码是没有问题的。例程仅供参考！..._合宙获取天气

EasyMesh和802.11s对比-程序员宅基地

文章浏览阅读7.7k次，点赞2次，收藏41次。1 关于meshMesh的意思是网状物，以前读书的时候，在自动化领域有传感器自组网，zigbee、蓝牙等无线方式实现各个网络节点消息通信，通过各种算法，保证整个网络中所有节点信息能经过多跳最终传递到目的地，用于数据采集。十多年过去了，在无线路由器领域又把这个mesh概念翻炒了一下，各大品牌都推出了mesh路由器，大多数是3个为一组，实现在面积较大的住宅里，增强wifi覆盖范围，智能在多热点之间切换，提升上网体验。因为节点基本上在3个以内，所以mesh的算法不必太复杂，组网形式比较简单。各厂家都自定义了组_802.11s

线程的几种状态_线程状态-程序员宅基地

文章浏览阅读5.2k次，点赞8次，收藏21次。线程的几种状态_线程状态

stack的常见用法详解_stack函数用法-程序员宅基地

文章浏览阅读4.2w次，点赞124次，收藏688次。stack翻译为栈，是STL中实现的一个后进先出的容器。要使用 stack，应先添加头文件include<stack>，并在头文件下面加上“ using namespacestd;"1. stack的定义其定义的写法和其他STL容器相同, typename可以任意基本数据类型或容器：stack<typename> name;2. stack容器内元素的访问..._stack函数用法

2018.11.16javascript课上随笔（DOM）-程序员宅基地

文章浏览阅读71次。<li> <a href = "“#”>-</a></li><li>子节点：文本节点（回车），元素节点，文本节点。不同节点树：　　节点（各种类型节点）childNodes:返回子节点的所有子节点的集合，包含任何类型、元素节点（元素类型节点）：child。node.getAttribute(at...

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

文章浏览阅读3.4k次。//config的设置是全局的layui.config({ base: '/res/js/' //假设这是你存放拓展模块的根目录}).extend({ //设定模块别名 mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名 ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录}); //你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）layui.exten_layui extend

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

文章浏览阅读3.2k次，点赞6次，收藏13次。分层思想分层思想分层思想-1分层思想-2分层思想-2OSI七层参考模型物理层和数据链路层物理层数据链路层网络层传输层会话层表示层应用层OSI七层模型的分层结构TCP/IP协议族的组成数据封装过程数据解封装过程PDU设备与层的对应关系各层通信分层思想分层思想-1在现实生活种，我们在喝牛奶时，未必了解他的生产过程，我们所接触的或许只是从超时购买牛奶。分层思想-2平时我们在网络时也未必知道数据的传输过程我们的所考虑的就是可以传就可以，不用管他时怎么传输的分层思想-2将复杂的流程分解为几个功能_5g分层结构

Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法_flushschedulerqueue render触发多次-程序员宅基地

Vue批量异步更新策略

概述

VUE 中的具体实现

小测验

虚拟DOM和Diff算法

概念

体验虚拟DOM

优点

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

整体流程

patch获取

patch实现

智能推荐

艾美捷Epigentek DNA样品的超声能量处理方案-程序员宅基地

11、合宙Air模块Luat开发：通过http协议获取天气信息_合宙获取天气-程序员宅基地

EasyMesh和802.11s对比-程序员宅基地

线程的几种状态_线程状态-程序员宅基地

stack的常见用法详解_stack函数用法-程序员宅基地

2018.11.16javascript课上随笔（DOM）-程序员宅基地

随便推点

layui.extend的一点知识第三方模块base 路径_layui extend-程序员宅基地

5G云计算：5G网络的分层思想_5g分层结构-程序员宅基地

基于二值化图像转GCode的单向扫描实现-程序员宅基地

算法随笔：强连通分量-程序员宅基地

Django(2)|templates模板+静态资源目录static_django templates-程序员宅基地

linux下的GPU测试软件,Ubuntu等Linux系统显卡性能测试软件 Unigine 3D-程序员宅基地

推荐文章

热门文章

相关标签

Vue 进阶 [八] Vue 源码剖析 02 批量异步更新 & 虚拟DOM Diff 算法_flushschedulerqueue render触发多次-程序员宅基地

Vue批量异步更新策略

概述

VUE 中的具体实现

小测验

虚拟DOM和Diff算法

概念

体验虚拟DOM

优点

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

整体流程

patch获取

patch实现

智能推荐

随便推点

推荐文章

热门文章

相关标签

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