使用vue for时为何要key

前言： 用vue框架写前端代码时常常会用用到v-for这个方法，但使用此方法时vue推荐咱们加上一个惟一标识key这是为何呢？阅读了网上各位大神的文章以及本身的一些理解对这个问题有了新的认识。因此记录下来，若各位看官看到文章里面有错误的地方请指正一下。谢谢各位大佬。

一.diff算法

修改渲染真实的dom会引发整个dom树的重绘和重排。diff算法能够帮助咱们只对咱们想要修改的部分进行更新而不会引发整个dom树的重绘和重排。 咱们先根据dom生成virtual DOM，当virtual Dom上的某个dom节点数据改变后会生成一个新的Vnode.将新生成的Vnode和oldVnode作对比。发现有修改的地方就直接渲染到真实的dom树上。
diff算法一边比较新旧节点的区别一边在真实的dom树上打补丁

二.key的做用

我我的以为key的做用就是为了快速的找到新节点对应的旧节点。key是给每个vnode惟一的id,能够依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点。但不使用key时代码也能够运行可是会报warning.为何呢。

三.不使用key时的执行

例:不使用key 一个数组arr=['1','2','3','4','5','6']。

<view v-for='arr'>
        {{item}}
    </view
复制代码

上面代码会生成6个div每一个div对应的arr中的数字。如今咱们将arr变成[0, 1, 2, 3, 7, 8, 9]。更新渲染的步骤时这样的原先div中的1变成0 2变成1以此类推最后新增一个div内容为9。 Vue会经过改变原来元素的内容和增长/减小元素来完成这个改变，由于没有key属性，Vue没法跟踪每一个节点，只能经过这样的方法来完成变动。

四.使用key时

例:numbers为[1, 2, 3, 7, 8, 9]

<div v-for="(num, index) in numbers" :key="index">
      {{num}}
    </div>
复制代码

变成了[0, 1, 2, 3, 7,8,9]新增一个

元素，它的内容为0，并将它插入原先内容为1的元素以前。 在有了key属性以后，Vue会记住元素们的顺序，并根据这个顺序在适当的位置插入/删除元素来完成更新，这种方法比没有key属性时的就地复用策略效率更高。 整体来讲，当使用列表渲染时，永远添加key属性，这样能够提升列表渲染的效率，提升了页面的性能。