使用vuefor时为什么要key的原因-创新互联

这篇文章主要介绍使用vue for时为什么要key的原因，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联建站长期为数千家客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为灵石企业提供专业的成都网站建设、成都网站设计，灵石网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

一.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']。

    {{item}}
  

上面代码会生成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]

   {{num}}