使用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 相关文章推荐
JS Timing
Apr 21 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
js 跳出页面的frameset框架示例介绍
Dec 23 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jquery实现弹出层效果实例
May 19 Javascript
JS实现表单多文件上传样式美化支持选中文件后删除相关项
Sep 30 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
vue radio单选框,获取当前项(每一项)的value值操作
Sep 10 Javascript
浅谈JSON5解决了JSON的两大痛点
Dec 14 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
discuz安全提问算法
2007/06/06 PHP
PHP缓存技术的多种方法小结
2012/08/14 PHP
微博短链接算法php版本实现代码
2012/09/15 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php生成curl命令行的方法
2015/12/14 PHP
PHP的邮件群发系统phplist配置方法详细总结
2016/03/30 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
jQuery extend 的简单实例
2013/09/18 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
好好了解一下Cookie(强烈推荐)
2016/06/14 Javascript
Javascript中indexOf()和lastIndexOf应用方法实例
2016/08/24 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
2016/09/17 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
node使用request请求的方法
2019/12/20 Javascript
python 获取文件列表(或是目录例表)
2009/03/25 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
Python2和Python3中urllib库中urlencode的使用注意事项
2018/11/26 Python
python贪吃蛇游戏代码
2020/04/18 Python
Scrapy-Redis结合POST请求获取数据的方法示例
2019/05/07 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
感恩节活动方案
2014/01/27 职场文书
班组建设经验交流材料
2014/05/12 职场文书
故意杀人案辩护词
2015/05/21 职场文书
朋友离别感言
2015/08/04 职场文书