本文摘自PHP中文网,作者coldplay.xixi,侵删。
Vue中key的作用
key
的特殊attribute
主要用在Vue
的虚拟DOM
算法,在新旧Nodes
对比时辨识VNodes
。如果不使用key
,Vue
会使用一种最大限度减少动态元素并且尽可能的尝试就地修改、复用相同类型元素的算法,而使用key
时,它会基于key
的变化重新排列元素顺序,并且会移除key
不存在的元素。此外有相同父元素的子元素必须有独特的key
,重复的key
会造成渲染错误。
相关学习推荐:javascript视频教程
描述
首先是官方文档的描述,当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
自身优化带来的影响。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html>
<html>
<head>
<title>Vue</title>
</head>
<body>
<p 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>
</p>
</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
的情况下,这个列表直接进行原地复用,原有的节点的位置不变,原地复用元素,将内容更新为5
、6
、7
、8
、9
、10
,并添加了11
与12
两个节点,而存在key
的情况下,原有的1
、2
、3
、4
节点被删除,5
、6
节点保留,添加了7
、8
、9
、10
、11
、12
六个节点,由于在DOM
的增删操作上比较耗时,所以表现为不带key
的情况下速度更快一些。
1 2 3 4 5 | console.time();
vm.simpleListWithoutKey = [5, 6, 7, 8, 9, 10, 11, 12];
vm.$nextTick(() => console.timeEnd());
|
1 2 3 4 5 | console.time();
vm.simpleListWithKey = [5, 6, 7, 8, 9, 10, 11, 12];
vm.$nextTick(() => console.timeEnd());
|
原地复用可能会带来一些副作用,文档中提到原地复用这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时DOM
状态的列表渲染输出,例如表单输入值。
在不设置key
的情况下,元素中没有与数据data
绑定的部分,Vue
会默认使用已经渲染的DOM
,而绑定了数据data
的部分会进行跟随数据渲染,假如操作了元素位置,则元素中未绑定data
的部分会停留在原地,而绑定了data
的部分会跟随操作进行移动,在下面的例子中首先需要将两个A
之后的输入框添加数据信息,这样就制作了一个临时状态,如果此时点击下移按钮,那么不使用key
的组中的输入框将不会跟随下移,且B
到了顶端并成为了红色,而使用key
的组中会将输入框进行下移,且A
依旧是红色跟随下移。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8" >
<meta name= "viewport" content= "width=device-width" >
<title>就地复用</title>
</head>
<body>
<p id= "app" >
<h3>采用就地复用策略(vuejs默认情况)</h3>
<p v- for = '(p, i) in persons' >
<span>{{p.name}}<span>
<input type= "text" />
<button @click= 'down(i)' v- if = 'i != persons.length - 1' >下移</button>
</p>
<h3>不采用就地复用策略(设置key)</h3>
<p 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>
</p>
</p>
<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 (){
document.querySelectorAll( "h3 + p > 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:
|
复杂列表
使用key
不仅能够避免上述的原地复用的副作用,且在一些操作上可能能够提高渲染的效率,主要体现在重新排序的情况,包括在中间插入和删除节点的操作,在下面的例子中没有key
的情况下重新排序会原地复用元素,
但是由于v-if
绑定了data
所以会一并进行操作,在这个DOM
操作上比较消耗时间,而使用key
得情况则直接复用元素,v-if
控制的元素在初次渲染就已经决定,在本例中没有对其进行更新,所以不涉及v-if
的DOM
操作,所以在效率上会高一些。
1 2 3 4 5 6 7 8 9 | 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());
|
1 2 3 4 5 6 7 8 | 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());
|
以上就是代码详解Vue中key的作用示例的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
javascript如何显示和隐藏div
javascript中的对象分为哪几类
javascript背景图片怎么导入
c和javascript的区别是什么
d3.js实现创建完整柱形图的代码介绍
vue和react相似和区别是什么
javascript实现电池状态的方法
一文谈谈javascript和ecmascript的关系
vue常见面试题汇总(附答案解析)
javascript如何将其他类型转换为string
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 代码详解Vue中key的作用示例