VUE中key的作用和原理

<!DOCTYPE html>
<html>
<head>
<title>03-key的作用及原理</title>
</head>
<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
<script src="../../dist/vue.js"></script>
<script>
// 创建实例
const app = new Vue({
  el: '#demo',
  data: { items: ['a', 'b', 'c', 'd', 'e'] },
  mounted () {
    setTimeout(() => {
      this.items.splice(2, 0, 'f')
    }, 2000);
  }
});
</script>
</body>
</html>

上面过程的图画重现

插入过程.jpg

如果不使用key,则每一项都需要强制更新，在创建最后一项

不使用key过程.jpg

若使用key循环旧数组，当发现旧开始节点与新开始节点的key不相等时，patch旧节点与新节点最后一项，过程如下

1、patch A

旧数组：a b c d e
新数组：a b f c d e

2、patch B

旧数组：b c d e
新数组：b f c d e

3、patch E

旧数组：c d e
新数组：f c d e

4、patch D

旧数组：c d
新数组：f c d

5、patch C

旧数组：a b c d e
新数组：a b f c d e

6、旧节点全部处理完毕，新节点只剩下f，就会把f插入到c前面即可。

不使用key和使用Key比较，前者是更新C->F、D->C、 E->D三次，插入E;后者是只进行了插入F的操作，在数据量大的时候，性能优化的效果显而易见。

结论

1、key的作用是为了高效更新虚拟DOM，原理是在源码patch.js的patchVnode过程中，会触发updateChildren()方法中可以通过key精准判断节点是否是同一节点，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

另外，若不设置key还可能在列表更新时引发一些隐蔽的bug
vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。