Vue中key原理和作用

2023-02-05 14:39:21

key的原理和作用

key 作用 :用来作为数据的唯一标识

key原理:vue中的key其实存在着一种diff算法,也正是这个diff算法,使得页面在被渲染时更加高效,什么是diff算法,其实是一种虚拟DOM算法,就是将新的虚拟DOM重新渲染的虚拟DOM进行一个对比 vue中的key属性就是按照这个key的值来一一对比。如果匹配到一样的Node节点会便不会重新使用新的虚拟DOM进行渲染,而是采用原有虚拟DOM结构。

情景一

在使用v-for时不使用key属性(其实vue会将其默认将索引作为key的唯一标识)

下面通过一个小例子来说一下不加key的弊端或者是使用索引作为key的值的弊端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>key的作用以及原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(list,index) in  userinfo">{{list.username +"-"+  list.age}}</li>
			</ul>
			<button @click="add">点击添加信息</button>     
		</div>

		<script type="text/javascript">
			const vm = new Vue({
				el: "#app",
				data: {
					msg:{username:"枫叶在飘呀",age:23},
					userinfo: [{
						username: "张三",
						age: 17
					}, {
						username: "李四",
						age: 17
					}, {
						username: "王五",
						age: 17
					}]
				},
				methods:{
					add()  //用来点击向userinfo头部添加一条数据
					{
						this.userinfo.unshift(this.msg)
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述
在这里插入图片描述

以上便是不是用key属性或者使用索引会出现的情况

情景二

使用数组中的唯一标识还会出现那样的情况吗?
我们可以给上面的数据加一个id作为唯一标识

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>key的作用以及原理</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(list,index) in  userinfo" :key="list.id">{{list.username +"-"+  list.age}}<input type="text" /></li>
			</ul>
			<button @click="add">点击添加信息</button>     
		</div>

		<script type="text/javascript">
			const vm = new Vue({
				el: "#app",
				data: {
					msg:{username:"枫叶在飘呀",age:23},
					userinfo: [{
						id:1
						username: "张三",
						age: 17
					}, {
						id:2
						username: "李四",
						age: 17
					}, {
						id:3
						username: "王五",
						age: 17
					}]
				},
				methods:{
					add()
					{
						this.userinfo.unshift(this.msg)
					}
				}
			})
		</script>
	</body>
</html>

在这里插入图片描述

总结一下使用key的优点
1.可以确定数据的唯一标识,可以通过唯一标识找到整条数据
2.可以减少DOM结构重新渲染,提高性能,因为它会有一个虚拟DOM对比算法,未发生变化的值,使用原有的虚拟DOM结构,如果有被重新渲染后的数据才会被重新渲染。

~相信你也体会到key的强大作用了吧~

  • 作者:枫叶在飘呀
  • 原文链接:https://blog.csdn.net/ld16631069828/article/details/121023682
    更新时间:2023-02-05 14:39:21