一篇让你读懂diff算法

最新推荐文章于 2024-01-03 23:55:58 发布

是阿瑶呀~

最新推荐文章于 2024-01-03 23:55:58 发布

阅读量192

点赞数 2

分类专栏： VUE 文章标签： vue.js 算法 javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_61006976/article/details/120913020

版权

VUE 专栏收录该内容

14 篇文章

订阅专栏

本文详细解析了Vue中的diff算法在不同场景下的应用，包括根元素变化时的删除重建，属性改变时的元素复用和更新，以及子元素不变时的内容更新。通过举例说明了无key和有key情况下，如何进行就地更新或创建新DOM，强调了key值在决定DOM复用中的关键作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

情况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结构对比过程:

有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, '新来的')
        }
    }
};

key为索引-图解过程 (又就地往后更新了)

v-for先循环产生新的DOM结构, key是连续的, 和数据对应
然后比较新旧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>