vue中key的作用和工作原理

最新推荐文章于 2024-07-04 09:54:33 发布

骑蜗牛de刘皇shu

最新推荐文章于 2024-07-04 09:54:33 发布

阅读量537

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/ZkD953/article/details/109965077

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/vconsole.min.js"></script>
		<style>
			.mat10{
				margin-top: 10px;
			}
			
			.mal20{
				margin-left: 20px;
			}
			.column{
				width: 125px;
				display: flex;
				flex-direction: column;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <student :key="item.name" v-for="(item,index) in stuList" :intro="item"></student> -->
			<student v-for="(item,index) in stuList" :intro="item"></student>
			<div class="column">
				<button class="mat10" @click="addStu">小明加入到队伍中</button>
				<button class="mat10" @click="delStu">移除第三个学生</button>
				<button class="mat10" @click="givePrizes">给第三个人发奖</button>
			</div>
		</div>
		<script type="text/javascript">
			var vConsole = new VConsole();
			//定义组件
			Vue.component('student', {
				template: '<div>姓名：{{intro.name}}<span v-if="intro.prizes">，{{intro.prizes}}</span></div>',
				props: {
					intro: Object //基本信息
				},
				data() {
					return {}
				},
				watch: {
					intro: function(newVal, oldVal) {
						console.log("更新 ：" + oldVal.name + "--->" + newVal.name);
					}
				},
				created: function() {
					console.log("创建 ：", this.intro.name);
				}
			})
			// 创建实例
			var app = new Vue({
				el: '#app',
				data() {
					return {
						stuList: [{
								name: '张三'
							},
							{
								name: '李四'
							}, {
								name: '王五'
							}, {
								name: '赵六'
							}, {
								name: '毛七'
							}
						]
					}
				},
				computed: {},
				methods: {
					addStu() {
						//在王五的前面插入小明
						this.stuList.splice(2, 0, {
							name: '小明'
						})
					},
					delStu() {
						//删除第3个学生
						this.stuList.splice(2, 1);
					},
					/**
					 * 给队伍的第三个人发奖
					 */
					givePrizes() {
						//修改数组第3项
						this.$set(this.stuList[2], `prizes`, "三号学生");
					}
				}
			});
		</script>
	</body>
</html>

点击以下链接，查看运行结果：

使用key，点击运行

不使用key，点击运行

依次点击：小明加入到队伍中 -> 给第三个人发奖 -> 移除第三个学生

结果：

观察运行结果，发现使用key，在性能上明显优于不使用key。

源码：core/vdom/patch.js - updateChildren()

结论：

1. key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操
作量，提高性能。
2. 另外，若不设置key还可能在列表更新时引发一些隐蔽的bug
3. vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。