千锋扣丁学堂HTML5培训之使用vue for时为什么要key

今天千锋扣丁学堂HTML5培训老师给大家分享一篇关于使用vue for时为什么要key的详细介绍，首先用vue框架写前端代码时经常会用用到v-for这个方法，下面我们一起来看一下吧。

一.diff算法

修改渲染真实的dom会引起整个dom树的重绘和重排。diff算法可以帮助我们只对我们想要修改的部分进行更新而不会引起整个dom树的重绘和重排。我们先根据dom生成virtualDOM，当virtualDom上的某个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变成02变成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属性，这样可以提高列表渲染的效率，提高了页面的性能。

以上就是关于千锋扣丁学堂HTML5培训之使用vue for时为什么要key的全部内容,希望对大家有所帮助，想要了解更多关于HTML5方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5开发环境搭建视频，HTML5培训后的前景无限，行业薪资和未来的发展会越来越好的，扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。