使用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 相关文章推荐
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
js获取当前页面的url网址信息
Jun 12 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
详解JavaScript中的表单验证
Jun 16 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
clipboard.js在移动端复制失败的解决方法
Jun 13 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
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php 过滤危险html代码
2009/06/29 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
WebQQ最新登陆协议的用法
2014/12/22 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
基于jQuery的表格操作插件
2010/04/22 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
2011/01/17 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
2014/08/18 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
javascript函数中的3个高级技巧
2016/09/22 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
Vue实现微信支付功能遇到的坑
2019/06/05 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
koa2 数据api中间件设计模型的实现方法
2020/07/13 Javascript
JS this关键字在ajax中使用出现问题解决方案
2020/07/17 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python实现多线程抓取网页功能实例详解
2017/06/08 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python实现基于信息增益的决策树归纳
2018/12/18 Python
django模板结构优化的方法
2019/02/28 Python
Django实现简单的分页功能
2021/02/22 Python
用html5实现语音搜索框的方法
2014/03/18 HTML / CSS
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
Bonprix法国:时尚、鞋子、家居
2020/12/29 全球购物
小学教师节活动总结
2015/03/20 职场文书
入党函调证明材料
2015/06/19 职场文书