v-for 中的key值的作用

v-for中的key值的作用

当我们在使用v-for列表渲染时，通常要绑定 key 。

<ul>
    <li v-for="item in items" :key="item.id">{{item.title}}</li>
</ul>

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM
元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

那么key 究竟有什么作用呢？

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确， 更快的找到对应的vnode节点

设置key与不设置key区别

例如：在B 和 C 之间要插入 F

<template>
  <div class="home">
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      items: [
        { id: "1", title: "A" },
        { id: "2", title: "B" },
        { id: "3", title: "C" },
        { id: "4", title: "D" },
        { id: "5", title: "E" },
      ],
    };
  },
  mounted() {
    setTimeout(() => {
      this.items.splice(2, 0, {id: "6", title: "F"}); 
    }, 2000);
  },
};
</script>

在不设置key的情况下，vue会这样操作：

即把C更新成F，D更新成C，E更新成D，最后再插入E，很没有效率。

在使用key的情况：vue会进行这样的操作：

Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点，提高了diff效率。