使用vue for时为什么要key【推荐】

 更新时间:2019年07月11日 16:46:35   作者:取名困难综合症   我要评论
很多朋友不明白在使用vue for时为什么要key,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属性,这样可以提高列表渲染的效率,提高了页面的性能。

总结

以上所述是小编给大家介绍的使用vue for时为什么要key属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对澳门金沙网上娱乐网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • 用v-html解决Vue.js渲染中html标签不被解析的问题

    用v-html解决Vue.js渲染中html标签不被解析的问题

    这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析,html标签显示为字符串的问题,文中通过图文介绍的很详细,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • vue 设置proxyTable参数进行代理跨域

    vue 设置proxyTable参数进行代理跨域

    这篇文章主要介绍了vue 设置proxyTable参数进行代理跨域的相关资料,及代理跨域的概念原理,需要的朋友可以参考下
    2018-04-04
  • 详解vue 模版组件的三种用法

    详解vue 模版组件的三种用法

    本篇文章主要介绍了详解vue 模版组件的三种用法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue模式history下在iis中配置流程

    vue模式history下在iis中配置流程

    这篇文章主要介绍了vue模式history下在iis中配置流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-04-04
  • 什么是Vue.js框架 为什么选择它?(第一课)

    什么是Vue.js框架 为什么选择它?(第一课)

    Vue.js框架是什么,为什么要选择它?这篇文章为大家介绍目前前端技术使用的趋势,以及Vue.js的优点和适用场景等,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • Vue的编码技巧与规范使用详解

    Vue的编码技巧与规范使用详解

    这篇文章主要介绍了Vue的编码技巧与规范使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • 浅谈Vue初学之props的驼峰命名

    浅谈Vue初学之props的驼峰命名

    这篇文章主要介绍了浅谈Vue初学之props的驼峰命名,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • Vue项目自动转换 px 为 rem的实现方法

    Vue项目自动转换 px 为 rem的实现方法

    这篇文章主要介绍了Vue项目自动转换 px 为 rem的实现方法,本文是通过一系列的配置后,转换成热门,具体内容详情大家跟随小编一起通过本文学习吧
    2018-10-10
  • 讲解vue-router之什么是嵌套路由

    讲解vue-router之什么是嵌套路由

    这篇文章主要介绍了讲解vue-router之什么是嵌套路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue + axios get下载文件功能

    vue + axios get下载文件功能

    这篇文章主要为大家详细介绍了vue + axios get下载文件功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09

最新评论