阅读 72

vue中的key属性的正确使用

以下为个人理解,用于本人做笔记,欢迎大神指出错误

定义

  1. key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

  2. 当 Vue 正在更新使用 v-for 渲染的元素列表时,它默认使用“就地更新”的策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序,而是就地更新每个元素

示例

<div id="app">
	<div>
		<input type="text" v-model="name">
		<button @click="unshift">前面添加</button>
		<button @click="push">后面添加</button>
		<button @click="splice">在第2条后添加</button>
		<button @click="exchange">第一条li与第二条互换</button>
	</div>
	<ul>
		<li>没有key</li>
		<li v-for="(item, i) in list">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
	<hr>
	<ul>
		<li>key="i"</li>
		<li v-for="(item, i) in list" :key="i">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
	<hr>
	<ul>
		<li>key="item.id"</li>
		<li v-for="(item, i) in list" :key="item.id">
			<input type="checkbox"> {{item.name}}
		</li>
	</ul>
</div>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			name: '',
			newId: 3,
			list: [{
					id: 1,
					name: '李斯'
				},
				{
					id: 2,
					name: '吕不韦'
				},
				{
					id: 3,
					name: '嬴政'
				}
			]
		},
		methods: {
			unshift() {
				this.list.unshift({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			push() {
				this.list.push({
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			splice() {
				this.list.splice(2,0,{
					id: ++this.newId,
					name: this.name
				})
				this.name = ''
			},
			exchange() {
				const del = this.list.splice(1,1);
				this.list.unshift(del[0]);
			}
		}
	});
</script>
复制代码

在这里插入图片描述

当选中吕不为时,前面添加楠楠

在这里插入图片描述

当选中吕不为时,后面添加楠楠

在这里插入图片描述

当选中吕不为时,在第二条后添加楠楠

在这里插入图片描述

第一条li与第二条互换

在这里插入图片描述

结论

key的作用就是更新组件时判断两个节点是否相同。相同就复用,不相同就删除旧的创建新的。如果不添加key组件默认都是就地复用,不会删除添加节点,只是改变列表项中的文本值,要知道节点操作是十分耗费性能的。而添加了key之后,当对比内容不一致时,就会认为是两个节点,会先删除掉旧节点,然后添加新节点。

  • 没有key时,前3个节点复用,只修改值,在最后添加了一个新节点
  • key="i"时,当新节点的key与旧的key相同时,则复用旧节点,key为0,1,2的节点会复用旧节点,选中的节点为key="1",
  • key="item.id"时,此id为唯一值,所以其它3个旧节点都会复用

  1. 如果只是交换顺序,key用 i 或者不用的性能比较好,因为只是改变节点的值,这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。

  2. 如果会增删数据,key用唯一标识的性能比较好,vue根据这唯一的key跟踪每个节点的身份,从而重用和重新排序现有元素,新节点的key与旧节点key相同时,会直接复用

其它用法

<transition>
    <span :key="text">{{ text }}</span>
</transition>
复制代码

当 text 发生改变时, 总是会被替换而不是被修改,因此会触发过渡。