vue---绑定key值与不绑定key的作用及其优点

vue—key值绑定的作用及优点

**
本文基于vue2x版本进行解析：
绑定key值：可以更快速和更精确的确定变化数据的位置，并进行响应式操作，在一定量的数据之上时，是高性能的，更多的情况下与v-for一起使用；
不绑定key值：vue默认机制状态下的，当小于一定数据量时，并且DOM数据简单处理时，在刻意使用的情况下，vue的默认机制是更加高性能的，仅限于数据量较小，数据类型简单且后续不会有过多更新时使用。
总的来说，绑定key值与v-for绑定使用效果更好，不绑定key，在简单场景下使用性能更高，各有优缺点，可根据使用场景，按需使用。
代码分析见下文（如有错误请不吝指出，如正确必采纳改正）

1.在不绑定key的时候：
vue中的默认机制是不绑定key，

<div class="father" v-for=" item in data">
    <div>1</div>  //node：a   默认状态下的不绑定key的虚拟节点
    <div>2</div>  //node：b
    <div>3</div>  //node：c
    <div>4</div>  //node：d
</div>

此状态下的key值发生变化，更新的机制则是{就地更新}，但相应的虚拟节点不会发生变化`如下图所示：这种是vue的默认机制，就地更新，适用于简单的DOM数据渲染，在一定的数据量下，是比key值绑定更加高性能的；

<div class="father" v-for=" item in data">
    <div>2</div>  //node：a   数据变化后，默认机制的标识没有变化，
    <div>3</div>  //node：b
    <div>4</div>  //node：c
    <div>1</div>  //node：d
</div>

2：在绑定key值的时候：
此时，所有的虚拟节点均被绑定唯一的标识，类似于身份证的作用；

<div class="father" v-for=" item in data" :key="item.id">
    <div>1</div> //key:a   key值为唯一标识，
    <div>2</div> //key:b
    <div>3</div> //key:c
    <div>4</div> //key:d 
</div>

如果其中的数据发生变化，diff算法会映射到变化的虚拟节点，更加快速和精准的找到变化的节点，并对其进行newkey和oldkey的值判断，进行相应的更新操作：如下图

<div class="father" v-for=" item in data" :key="item.id">
    <div>4</div> //key:d  //数值变化  key值作为唯一标识，跟随
    <div>2</div> //key:b
    <div>3</div> //key:c
    <div>1</div> //key:a  //数值变化  key值作为唯一标识，跟随
</div>

key的唯一标识是跟随数据变化的，并且唯一对应，