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


Posted in Javascript onJuly 11, 2019

前言:

用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属性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Jquery 实现Tab效果 思路是js思路
Mar 02 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
Javascript实现网络监测的方法
Jul 31 Javascript
axios学习教程全攻略
Mar 26 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
Javascript摸拟自由落体与上抛运动原理与实现方法详解
Apr 08 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 #Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 #Javascript
微信小程序之几种常见的弹框提示信息实现详解
Jul 11 #Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 #jQuery
vue项目中实现缓存的最佳方案详解
Jul 11 #Javascript
浅入深出Vue之组件使用
Jul 11 #Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 #Javascript
You might like
php完全过滤HTML,JS,CSS等标签
2009/01/16 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php使用Session和文件统计在线人数
2015/07/04 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
javascript iframe编程相关代码
2009/12/28 Javascript
javascript中类的定义及其方式(《javascript高级程序设计》学习笔记)
2011/07/04 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
2013/05/21 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
从setTimeout看js函数执行过程
2017/12/19 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
简单上手Python中装饰器的使用
2015/07/12 Python
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
html5启动原生APP总结
2020/07/03 HTML / CSS
wordpress添加Html5的表单验证required方法小结
2020/08/18 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
2013年保送生自荐信格式
2013/11/20 职场文书
优秀学生党员先进事迹材料
2014/05/29 职场文书
异地年检委托书范本
2014/09/24 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
家长评语怎么写
2014/12/30 职场文书
教师个人发展总结
2015/02/11 职场文书
浪漫婚礼主持词开场白
2015/11/24 职场文书
redis 查看所有的key方式
2021/05/07 Redis