vue基础_diff 算法

diff 算法对比动图

在这里插入图片描述

从pathnode往下看diff算法执行过程

Vue生命周期流程图(含diff算法)
在这里插入图片描述

vue基础_diff算法

vue用diff算法, 新虚拟dom, 和旧的虚拟dom比较

情况1: 根元素变了, 删除重建

旧虚拟DOM

<div id="box">
    <p class="my_p">123</p>
</div>

新虚拟DOM

<ul id="box">
    <li class="my_p">123</li>
</ul>
情况2: 根元素没变, 属性改变, 元素复用, 更新属性

旧虚拟DOM

<div id="box">
    <p class="my_p">123</p>
</div>

新虚拟DOM

<div id="myBox" title="标题">
    <p class="my_p">123</p>
</div>

_vue基础_diff算法-key

情况3: 根元素没变, 子元素没变, 元素内容改变
无key - 就地更新

v-for不会移动DOM, 而是尝试复用, 就地更新,如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

<ul id="myUL">
    <li v-for="str in arr">
        {{ str }} 
        <input type="text">
    </li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>
export default {
    data(){
        return {
            arr: ["老大", "新来的", "老二", "老三"]
        }
    },
    methods: {
        addFn(){
            this.arr.splice(1, 0, '新来的')
        }
    }
};

在这里插入图片描述

旧 - 虚拟DOM结构 和 新 - 虚拟DOM结构 对比过程

在这里插入图片描述

性能不高, 从第二个li往后都更新了

有key - 值为索引
  • 还是就地更新

因为新旧虚拟DOM对比, key存在就复用此标签更新内容, 如果不存在就直接建立一个新的

<ul id="myUL">
    <li v-for="(str, index) in arr" :key="index">
        {{ str }} 
        <input type="text">
    </li>
</ul>
<button @click="addFn">下标为1的位置新增一个</button>
export default {
    data(){
        return {
            arr: ["老大", "新来的", "老二", "老三"]
        }
    },
    methods: {
        addFn(){
            this.arr.splice(1, 0, '新来的')
        }
    }
};

在这里插入图片描述

  1. v-for先循环产生新的DOM结构, key是连续的, 和数据对应

  2. 然后比较新旧DOM结构, 找到区别, 打补丁到页面上

    最后补一个li, 然后从第二个往后, 都要更新内容

口诀: key的值有id用id, 没id用索引

有key - 值为id

key的值只能是唯一不重复的, 字符串或数值

v-for不会移动DOM, 而是尝试复用, 就地更新,如果需要v-for移动DOM, 你需要用特殊 attribute key 来提供一个排序提示

新DOM里数据的key存在, 去旧的虚拟DOM结构里找到key标记的标签, 复用标签

新DOM里数据的key存在, 去旧的虚拟DOM结构里没有找到key标签的标签, 创建

旧DOM结构的key, 在新的DOM结构里没有了, 则移除key所在的标签

<template>
  <div>
    <ul>
      <li v-for="obj in arr" :key="obj.id">
        {{ obj.name }}
        <input type="text">
      </li>
    </ul>
    <button @click="btn">下标1位置插入新来的</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          name: '老大',
          id: 50
        },
        {
          name: '老二',
          id: 31
        },
        {
          name: '老三',
          id: 10
        }
      ],
    };
  },
  methods: {
    btn(){
      this.arr.splice(1, 0, {
        id: 19, 
        name: '新来的'
      })
    }
  }
};
</script>

<style>
</style>

图解效果:

在这里插入图片描述

在这里插入图片描述

总结: 不用key也不影响功能(就地更新), 添加key可以提高更新的性能

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue2和Vue3都是流行的前端框架,它们在虚拟DOM的diff算法上有一些区别。下面我会详细介绍一下Vue2和Vue3的diff算法Vue2的diff算法Vue2使用的是经典的双指针算法来进行虚拟DOM的diff过程。大致的步骤如下: 1. 创建新旧虚拟DOM树(VNode),并进行比较。 2. 对新旧虚拟DOM树进行同层级的节点对比,找出差异。 3. 如果两个节点类型不同,则直接替换整个节点及其子节点。 4. 如果两个节点类型相同,则进行更详细的比较。 5. 对于有key的节点,通过key来匹配新旧节点,减少移动节点的操作。 6. 对于没有key的节点,使用遍历的方式进行比较,效率较低。 7. 如果在旧节点集合中找不到匹配的节点,则认为是新增节点,创建并插入到正确的位置。 8. 如果在新节点集合中找不到匹配的节点,则认为是删除节点,从DOM中移除。 Vue2的diff算法存在一些缺点: 1. 每次更新都需要对整个VNode树进行遍历,效率较低。 2. 对于没有key的节点,会使用遍历的方式进行比较,导致性能下降。 3. 当VNode树较大时,diff算法的性能会受到影响。 Vue3的diff算法Vue3采用了一种更高效的diff算法,称为静态标记和提升(Static Markup and Hoisting)。它的主要思想是通过编译阶段的静态分析,将动态节点和静态节点进行标记,从而减少diff的过程。 Vue3的diff算法具体步骤如下: 1. 在编译阶段,通过静态分析将模板中的动态节点和静态节点进行标记。 2. 对于静态节点,会将其提升为常量,并在patch过程中跳过对这些节点的比较。 3. 对于动态节点,会使用类似Vue2的diff算法进行比较和更新。 4. 对于列表渲染(v-for)的情况,会通过唯一的key来进行精确匹配和复用节点。 5. 通过静态标记和提升,减少了不必要的比较和更新操作,提高了diff算法的效率。 Vue3的diff算法相比Vue2有以下优点: 1. 在编译阶段进行静态标记和提升,减少了运行时的工作量。 2. 可以更精确地识别出动态节点和静态节点,减少不必要的比较和更新操作。 3. 对于列表渲染,通过唯一的key进行精确匹配和复用节点,提高了性能。 总结: Vue2和Vue3的diff算法都是基于虚拟DOM的思想,但Vue3引入了静态标记和提升的概念,通过编译阶段的静态分析来优化diff过程,提高了性能。在实际开发中,如果需要更高的性能,推荐使用Vue3。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值