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 相关文章推荐
jquery trim() 功能源代码
Feb 14 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
jquery自定义插件开发之window的实现过程
May 06 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
windows下vue.js开发环境搭建教程
Mar 20 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
详解vue 命名视图
Aug 14 Javascript
JS如何在数组指定位置插入元素
Mar 10 Javascript
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
使用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
php生成随机密码的几种方法
2011/01/17 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
jquery验证手机号码、邮箱格式是否正确示例代码
2013/07/28 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
jQuery如何防止这种冒泡事件发生
2015/02/27 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
JS实现的表格操作类详解(添加,删除,排序,上移,下移)
2015/12/22 Javascript
深入理解JQuery中的事件与动画
2016/05/18 Javascript
详解Nodejs的timers模块
2016/12/22 NodeJs
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
jquery实现图片跟随鼠标的实例
2017/10/17 jQuery
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
2018/03/01 Javascript
详解JS实现系统登录页的登录和验证
2019/04/29 Javascript
layui动态表头的实现代码
2019/08/22 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
在类Unix系统上开始Python3编程入门
2015/08/20 Python
python条件变量之生产者与消费者操作实例分析
2017/03/22 Python
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
护士实习求职信
2014/06/22 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS
java版 联机五子棋游戏
2022/05/04 Java/Android