vue组件中不绑定 vs 绑定key的细节分析

关于 Vue中key能优化性能的一点理解。
先上代码，方便理解。

<template>
  <div id="app">
    <h4>不绑定key</h4>
    <div v-for="item in arr1">{{item}}</div>
    <h4>用数组索引绑定key</h4>
    <div v-for="(item,index) in arr2" :key="index">{{item}}</div>
    <h4>用稳定的id绑定key</h4>
    <div v-for="item in arr3" :key="item.id">{{item.val}}</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      arr1:[1,2,3,4],
      arr2:[5,6,7,8],
      arr3:[
        {id:9,val:9},
        {id:10,val:10},
        {id:11,val:11},
        {id:12,val:12}
        ]
    }
  },  
}
</script>

下图是dom树的结构：

① arr1 不绑定key值：
此时我们在arr1渲染完成的节点上增加一个自定义的属性 render = ‘{渲染的值}’。
如下图：

当我们在数组的2和3之间插入一个元素666，此时dom结构的变动如下图：

如上图所示，我们插入的666替换了本来内容为3的节点的文本，下面的节点重复这个过程。最后新增了一个div元素，内容为4。
这就是vue的就近更新策略。

② arr2 以数组索引为 key 的情况分析：
我们继续上面的过程，在arr2渲染的元素上新增我们用来识别的属性 render，如下图：

此时我们在数组的6和7之间插入666，dom的结构变动如图所示：

根据上图的情况，我们可以清晰地观察到跟情况①一模一样。如果使用索引作为key值，因为索引是动态的，插入一个元素，从插入的地方到数组的尾部依次更新，插入的前面不做变化。如果没有较好的选择，可以使用索引作为key，一般不建议使用。应该用一个稳定的id值来作为key，那就是下面的情况。

③ arr3 使用id值作为key的情况分析：
还是老规矩，给每个arr3迭代的元素加一个自定义的render属性来观察变化：

此时我们在10和11之前插入666，观察之后的dom结构变化：

如上图所示，在正确的位置插入了我们新增的节点，切之前的节点并没有改变。这就是使用稳定的key值的性能提升。

总结：当数据量很小时，如果没有稳定的id，我们可以将就用索引作为key值，当数据量很大时，必须指定唯一的id来优化性能，方便vue快速的找到改动的地方来响应变化。