key的作用和原理

阅读目录

1. 理解key　　
   • 不使用key
   • 使用key
2. 为什么不建议在v-for中使用index作为key？

 

---

回到顶部

理解key　　

　　key主要作用于虚拟DOM算法中，赋予每个vnode唯一的标识，可以根据这个标识更快更准确地找到对于的vnode节点，在新旧vnode比对时效率更高。

 

不使用key

 

 

 

 　　在不使用key时，Vue会采用就地复用原则，最大限度地减少元素的移动，对同一个位置的oldVnode与newVnode进行比对。在上面例子中，从C与F开始，oldVnodes与newVnodes节点不同，就需要修改节点，一共需要三次修改，最后由于newVnodes多出一个节点，需要进行一次E节点的插入。

 

使用key

 

　　而使用了key，它会基于key的变化重新排列元素顺序，对于节点A、B、C、D、E都可以直接复用，而只需要对新增的节点F进行一次插入操作即可。同时，也会移除key不存在的元素。

 

回到顶部

为什么不建议在v-for中使用index作为key？

示例：

<ul>
   <li v-for="(item, index) in list" :key="index">{{ item.title }}</li>
</ul>
<button @click="add">增加</button>

list: [
        { title: "a", id: "100" },
        { title: "b", id: "101" },
        { title: "c", id: "102" },
      ]
      
add() {
      this.list.unshift({ title: "林三心", id: "99" });
    }

　　在这个示例中，我们点击按钮就会在列表头部添加新元素。按理说，由于节点a，b，c并没有做任何修改，应该复用之前的。但由于新增元素是在列表头部插入，导致节点a，b，c的索引index发生改变，相当于进行了就地复用原则。因此比对的过程如下面所示，进行了三次修改，一次插入操作。

 

　　

 　　在该示例中，id是每个节点的唯一标识，以id作为key时，虽然列表中节点顺序改变了，但id仍然没变，因此比对时除了新增元素外，其他元素的key值是一一对应的，可以直接复用，最终只执行了一次插入操作。