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的唯一标识是跟随数据变化的,并且唯一对应,