Vue2 - diff 原理(动图演示)

2024-01-08 01:38:53

1,diff

解释:对比新旧虚拟DOM树,完成对真实DOM的更新,这个对比差异的过程叫做 diff

Vue 会在内部的 patch 函数中完成该过程。

diff 的时间点

当组件创建时,或依赖的数据变化时,会运行一个特定的函数来做2件事:

  • 运行 _render 函数生成新的 VNode tree(虚拟DOM树)
  • 运行 _update 函数,传入新的 VNode tree 的根节点,对比新旧2个树,最终完成对真实DOM的更新。

代码表示大致逻辑:

// vue构造函数
function Vue(){
  // ... 其他代码
  var updateComponent = () => {
    this._update(this._render())
  }
  new Watcher(updateComponent);
  // ... 其他代码
}

diff 就发生在_update函数的运行过程中

Watcher 的作用:简单来说,运行传入的函数(updateComponent),对函数中用到的响应式数据进行依赖收集。

Watcher 的作用具体参考Vue2-数据响应式原理

2,_update 函数

  1. _update 函数接收一个 VNode 参数,也就是this._render() 返回的生成的虚拟 DOM 树。

  2. _update 函数通过当前组件的 this._vnode 属性,拿到的虚拟 DOM 树。

  3. _update 函数首先会给组件的 this._vnode 属性重新赋值,让它指向新树。再判断旧树是否存在:

    • 不存在,说明是第一次加载组件,则通过 patch 函数直接遍历新树,为每个节点生成真实的DOM,并挂载到每个节点的 elm 属性上。(虚拟节点通过 elm 属性指向绑定的真实DOM。)
    • 存在,说明之前已经渲染过组件,则通过 patch 函数对新旧树对比,来实现2个目标:
      • 完成对所有真实 DOM 的最小化处理。
      • 让新树的节点对应合适的真实DOM。

不存在的流程:
不存在的流程
存在时的流程:
不存在时的流程

// 伪代码表示:
function update(vnode) {
  vnode // 新
  this._vnode // 旧
  this._vnode = vnode
}

这样就完成了组件的虚拟DOM树的更新

但还需要解决真实的 DOM 更新(如果不考虑效率,直接用新树生成真实DOM即可)。而为了提升效率,需要对比新旧树,通过实现下面2个目标来提升效率。这个步骤在 _patch 函数中实现。

  • 完成对所有真实 DOM 的最小化处理。
  • 让新树的节点对应合适的真实DOM。

3,_patch 函数(进行 diff)

先来介绍几个术语,方便后续阅读:

  1. 【相同】:指2个虚拟节点的标签(tag)类型、key 值均相同。input 元素还需要考虑 type 属性。

不考虑内容,或后代节点。

<!-- 举例 -->

<!-- 节点相同 -->
<h1>123</h1> <!-- 对应节点 { tag: h1, key: undefined } -->
<h1>456</h1> <!-- 对应节点 { tag: h1, key: undefined } -->

<!-- 节点相同 -->
没有标签包裹的文字1  <!-- 对应节点 { tag: undefined , key: undefined } -->
没有标签包裹的文字2  <!-- 对应节点 { tag: undefined , key: undefined } -->

<!-- 节点相同 -->
<h1>123</h1> <!-- 对应节点 { tag: h1, key: undefined } -->
<h1>456</h1> <!-- 对应节点 { tag: h1, key: undefined } -->

<!-- 节点不同 -->
<input type="text" key="_key1"> <!-- 对应节点 { tag: input, key: _key1, data: {attrs: {type: text}} } -->
<input type="radio" key="_key1"> <!-- 对应节点 { tag: input, key: _key1, data: {attrs: {type: radio}} } -->
  1. 【新建元素】:根据一个虚拟节点提供的信息,创建一个真实的 DOM 元素,同时挂载到虚拟节点的 elm 属性上。

  2. 【销毁元素】:运行 vnode.elm.remove()

  3. 【更新】:2个虚拟节点进行对比更新,仅发生在2个虚拟节点【相同】的情况下。

  4. 【对比子节点】:对2个虚拟节点的子节点进行对比。

3.1,根节点比较

在这里插入图片描述
首先会对根节点比较,如果2个虚拟节点

【相同】:进入【更新】流程

  • 将旧节点的真实 DOM 赋值到新节点:newVNode.elm = oldVNode.elm
  • 对比新旧节点的属性,有变化的更新到真实 DOM 中。
  • 当前2个节点处理完毕,开始【对比子节点】

不【相同】:新节点递归的【新建元素】。旧节点直接【销毁元素】。

如果根节点都不相同,则没有对比的必要,直接当做旧树不存在处理。

3.2,子节点比较

diff 的重点

再说明下 diff 的目的:为了修改真实的 DOM,并和新的 VNode tree 对应上

在【对比】子节点时,vue 的实现思路:

  1. 尽量什么也不做。
  2. 不行的话,尽量只改动元素属性。
  3. 还不行,尽量移动元素,而不是删除或创建元素。
  4. 还不行,删除和创建元素。

实现大致逻辑:使用头尾指针+遍历来实现。动图演示(数字代表的是 key,蓝块中的数字代表真实DOM的内容):

在这里插入图片描述

  • 对比新旧指针
    • 一样则进入【更新】流程。
      • 顺序:新旧头指针,新旧尾指针,旧头和新尾,旧尾和新头。
    • 不一样,则以新头指针为基准,看对应的 key 在旧树中是否存在(通过遍历旧树的方式),
      • 存在则进入【更新】流程,并调整真实 DOM 的位置,移动新头指针。
      • 不存在,则创建节点对应的 DOM 元素,
  • 当新头指针超过新尾指针,循环结束。剩下的旧节点如果还是正常的,说明没有处理完,则遍历销毁所有节点对应的真实DOM。旧树不用管,会被垃圾回收。

注意,每个新旧节点【更新】时,都会递归的遍历子节点。

4,key的问题

举例1

for 循环中的 item 如果不使用 key,数据更新(尤其是位置发生了变化)后做 diff 时,会认为原来位置新旧头指针每次指向的虚拟节点都【相同】,则每个节点都会【更新】。如果子节点较多,效率就更低了。

举例:

<template>
  <div>
    <ul>
      <li v-for="item in arr" :key="item">{{ item }}</li>
    </ul>
    <button @click="arr.unshift(99 + count++)">头部插入</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [1, 2, 3, 4, 5],
      count: 0,
    };
  },
};
</script>

因为 key 的存在,

  • 翻转数组时,也只是位置的移动,不会对比内容更新。
  • 头部插入时,只创建一个DOM,其他的DOM不做变动。否则逐一对比更新。

key 的效果:

在这里插入图片描述

不加 key 的效果:

在这里插入图片描述

举例2

注意,v-if/v-else 关于 key 的问题,vue3 会自动添加,可以看这篇文章对比 vue2 和 vue3 的变化

<template>
  <div>
    <div>
      <span @click="isAccoutLogin = true">账号登录</span>
      <span>|</span>
      <span @click="isAccoutLogin = false">手机号登录</span>
    </div>
    <div v-if="isAccoutLogin" key="1">
      <label>账号</label>
      <input type="text" />
    </div>
    <div v-else key="2">
      <label>手机号</label>
      <input type="text" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isAccoutLogin: true,
    };
  },
};
</script>

不加 key 时,因为节点相同,子节点也相同,所以不做更新。

在这里插入图片描述

key 才会有所区分,而清空输入框。

在这里插入图片描述


以上。

文章来源:https://blog.csdn.net/qq_40147756/article/details/135336528
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。