Vue中key的作用示例代码详解


Posted in Javascript onJune 10, 2020

Vue中key的作用

key的特殊attribute主要用在Vue的虚拟DOM算法,在新旧Nodes对比时辨识VNodes。如果不使用keyVue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法,而使用key时,它会基于key的变化重新排列元素顺序,并且会移除key不存在的元素。此外有相同父元素的子元素必须有独特的key,重复的key会造成渲染错误。

描述

首先是官方文档的描述,当Vue正在更新使用v-for渲染的元素列表时,它默认使用就地更新的策略,如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出,例如表单输入值。为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute,建议尽可能在使用v-for时提供key attribute,除非遍历输出的DOM内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。

简单来说,当在列表循环中使用key时,需要使用key来给每个节点做一个唯一标识,diff算法就可以正确的识别此节点,找到正确的位置直接操作节点,尽可能地进行重用元素,key的作用主要是为了高效的更新虚拟DOM。此外,使用index作为key是并不推荐的做法,其只能保证Vue在数据变化时强制更新组件,以避免原地复用带来的副作用,但不能保证最大限度的元素重用,且使用index作为key在数据更新方面和不使用key的效果基本相同。

示例

首先定义一个Vue实例,渲染四个列表,分别为简单列表与复杂列表,以及其分别携带key与不携带key时对比其更新渲染时的速度,本次测试使用的是Chrome 81.0,每次在Console执行代码时首先会进行刷新重新加载界面,避免浏览器以及Vue自身优化带来的影响。

<!DOCTYPE html>
<html>
<head>
 <title>Vue</title>
</head>
<body>
 <div id="app">
 <ul>
 <li v-for="item in simpleListWithoutKey" >{{item}}</li>
 </ul>

 <ul>
 <li v-for="item in simpleListWithKey" :key="item" >{{item}}</li>
 </ul>

 <ul>
 <li v-for="item in complexListWithoutKey">
 <span v-for="value in item.list" v-if="value > 5">{{value}}</span>
 </li>
 </ul>

 <ul>
 <li v-for="item in complexListWithKey" :key="item.id">
 <span v-for="value in item.list" :key="value" v-if="value > 5">{{value}}</span>
 </li>
 </ul>

 </div>
</body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script type="text/javascript">
 var vm = new Vue({
 el: '#app',
 data: {
 simpleListWithoutKey: [1, 2, 3, 4, 5, 6],
 simpleListWithKey: [1, 2, 3, 4, 5, 6],
 complexListWithoutKey:[
 {id: 1, list: [1, 2, 3]},
 {id: 2, list: [4, 5, 6]},
 {id: 3, list: [7, 8, 9]}
 ],
 complexListWithKey:[
 {id: 1, list: [1, 2, 3]},
 {id: 2, list: [4, 5, 6]},
 {id: 3, list: [7, 8, 9]}
 ],
 }
 })
</script>
</html>

简单列表

在简单列表的情况下,不使用key可能会比使用key的情况下在更新时的渲染速度更快,这也就是官方文档中提到的,除非遍历输出的DOM内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。在下面的例子中可以看到没有key的情况下列表更新时渲染速度会快,当不存在key的情况下,这个列表直接进行原地复用,原有的节点的位置不变,原地复用元素,将内容更新为5678910,并添加了1112两个节点,而存在key的情况下,原有的1234节点被删除,56节点保留,添加了789101112六个节点,由于在DOM的增删操作上比较耗时,所以表现为不带key的情况下速度更快一些。

// 没有key的情况下
console.time();
vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12];
vm.$nextTick(() => console.timeEnd());
// default: 2.193056640625ms
// 存在key的情况下
console.time();
vm.simpleListWithKey = [5, 6, 7, 8, 9, 10, 11, 12];
vm.$nextTick(() => console.timeEnd());
// default: 3.2138671875ms

原地复用可能会带来一些副作用,文档中提到原地复用这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时DOM状态的列表渲染输出,例如表单输入值。在不设置key的情况下,元素中没有与数据data绑定的部分,Vue会默认使用已经渲染的DOM,而绑定了数据data的部分会进行跟随数据渲染,假如操作了元素位置,则元素中未绑定data的部分会停留在原地,而绑定了data的部分会跟随操作进行移动,在下面的例子中首先需要将两个A之后的输入框添加数据信息,这样就制作了一个临时状态,如果此时点击下移按钮,那么不使用key的组中的输入框将不会跟随下移,且B到了顶端并成为了红色,而使用key的组中会将输入框进行下移,且A依旧是红色跟随下移。

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width">
 <title>就地复用</title>
</head>
<body>

 <div id="app">
 <h3>采用就地复用策略(vuejs默认情况)</h3>
 <div v-for='(p, i) in persons'>
 <span>{{p.name}}<span> 
 <input type="text"/> 
 <button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
 </div> 

 <h3>不采用就地复用策略(设置key)</h3>
 <div v-for='(p, i) in persons' :key='p.id'>
 <span>{{p.name}}<span> 
 <input type="text"/> 
 <button @click='down(i)' v-if='i != persons.length - 1'>下移</button>
 </div>

 </div>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
 <script>
 new Vue({
 el: '#app',
 data: {
 persons: [
 { id: 1, name: 'A' },
 { id: 2, name: 'B' },
 { id: 3, name: 'C' }
 ]
 },
 mounted: function(){
 // 此DOM操作将两个A的颜色设置为红色 主要是为了演示原地复用
 document.querySelectorAll("h3 + div > span:first-child").forEach( v => v.style.color="red");
 },
 methods: {
 down: function(i) {
 if (i == this.persons.length - 1) return;
 var listClone = this.persons.slice();
 var one = listClone[i];
 listClone[i] = listClone[i + 1];
 listClone[i + 1] = one;
 this.persons = listClone;
 }
 }
 });
 </script>
</body>
</html>
<!-- 源于 https://www.zhihu.com/question/61078310 @霸都丶傲天 有修改-->

复杂列表

使用key不仅能够避免上述的原地复用的副作用,且在一些操作上可能能够提高渲染的效率,主要体现在重新排序的情况,包括在中间插入和删除节点的操作,在下面的例子中没有key的情况下重新排序会原地复用元素,但是由于v-if绑定了data所以会一并进行操作,在这个DOM操作上比较消耗时间,而使用key得情况则直接复用元素,v-if控制的元素在初次渲染就已经决定,在本例中没有对其进行更新,所以不涉及v-ifDOM操作,所以在效率上会高一些。

console.time();
vm.complexListWithoutKey = [
 {id: 3, list: [7, 8, 9]},
 {id: 2, list: [4, 5, 6]},
 {id: 1, list: [1, 2, 3]},
 ];
vm.$nextTick(() => console.timeEnd());
vm.$nextTick(() => console.timeEnd());
// default: 4.100244140625ms
console.time();
vm.complexListWithKey = [
 {id: 3, list: [7, 8, 9]},
 {id: 2, list: [4, 5, 6]},
 {id: 1, list: [1, 2, 3]},
 ];
vm.$nextTick(() => console.timeEnd());
// default: 3.016064453125ms

每日一题

总结

到此这篇关于Vue中key的作用的文章就介绍到这了,更多相关vue key 作用内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
jquery自定义表格样式
Nov 23 Javascript
ES6正则的扩展实例详解
Apr 25 Javascript
关于预加载InstantClick的问题解决方法
Sep 12 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
vue-router路由懒加载和权限控制详解
Dec 13 Javascript
浅析java线程中断的办法
Jul 29 Javascript
vue实现拖拽的简单案例 不超出可视区域
Jul 25 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 #Javascript
js 获取扫码枪输入数据的方法
Jun 10 #Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
Jun 10 #Javascript
使用 UniApp 实现小程序的微信登录功能
Jun 09 #Javascript
详解vue高级特性
Jun 09 #Javascript
vue实例的选项总结
Jun 09 #Javascript
微信小程序中的列表切换功能实例代码详解
Jun 09 #Javascript
You might like
AJAX for PHP简单表数据查询实例
2007/01/02 PHP
php简单静态页生成过程
2008/03/27 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
PHP数据过滤的方法
2013/10/30 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP图像处理类库及演示分享
2015/05/17 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP导出带样式的Excel示例代码
2016/08/28 PHP
JQuery下的Live方法和$.browser方法使用代码
2010/06/02 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
微信小程序实现的绘制table表格功能示例
2019/04/26 Javascript
vscode中Vue别名路径提示的实现
2020/07/31 Javascript
python小技巧之批量抓取美女图片
2014/06/06 Python
Python使用PyGreSQL操作PostgreSQL数据库教程
2014/07/30 Python
Python实现获取操作系统版本信息方法
2015/04/08 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
Python 解析xml文件的示例
2020/09/29 Python
CSS3 clip-path 用法介绍详解
2018/03/01 HTML / CSS
教师师德教育的自我评价
2013/10/31 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
医院保洁员岗位职责
2015/02/13 职场文书
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers