欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

荐 Vue中v-for配合key使用的重要性

程序员文章站 2022-06-25 09:21:15
在 Vue 官网的风格指南中,有很多对于Vue编码的风格的要求和建议。在这里,主要解释在编码指南中,为优先级A:必要的 的编码规范的 为 v-for 设置键值相信在编码初期,很多人都不理解 key 的作用,因为似乎有与没有,似乎都能完成元素的渲染。(当然,用过 Vue CLI,并设置了 ESlint 的朋友,应该会发现 ESLint 强制要求我们在使用 v-for 时,加入 key,否则在编译阶段会报错)在官网文档中,对 key 做出的诠释是:如果不使用 key,Vue 会使用一种最大限度....

Vue 官网风格指南中,有很多对于Vue编码的风格的要求和建议。
在这里,主要解释在编码指南中,为优先级A:必要的 的编码规范的 为 v-for 设置键值

相信在编码初期,很多人都不理解 key 的作用,因为似乎有与没有,似乎都能完成元素的渲染。(当然,用过 Vue CLI,并设置了 ESlint 的朋友,应该会发现 ESLint 强制要求我们在使用 v-for 时,加入 key,否则在编译阶段会报错)

在官网文档中,对 key 做出的诠释是:

如果不使用 keyVue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

由官方文档,则说明了 keyv-for 渲染的元素中,主要是作为唯一标识去让 Vue "认为"每个元素都是独一无二的,而不会因为为了减小渲染复用或修改之前相类似的元素,而导致一些特殊情况的出现。

不使用key的情况

<div id="app">
	<div>
		<input type="text" v-model="NewFruitName">
		<!-- 双向绑定文本框的输入到 NewFruitName -->
		<button @click="NewFruit">添加</button>
	</div>
	<ul>
		<li v-for="item in FruitList">
			<!-- <input type="checkbox"> {{item.name}} -->
			<input name="Fruit" type="radio"> {{item.name}}
		</li>
	</ul>
</div>
<script>
	// 创建 Vue 实例,并将其挂载在id为app的div上
	var vm = new Vue({
		el: '#app',
		data: {
			FruitList: [{
					id: 1,
					name: '苹果'
				},
				{
					id: 2,
					name: '香蕉'
				},
				{
					id: 3,
					name: '橘子'
				}
			],
			NewFruitId: 3,
			// 目前已存在的最大水果id为3
			NewFruitName: '',
			// 新的水果名
		},
		methods: {
			// 添加一个新的水果
			NewFruit() {
				this.NewFruitId = this.NewFruitId + 1;
				// unshift方法,是Array对象的方法,可向数组的开头添加一个或更多元素,并返回新的长度
				// 在这里用该方法,主要是为了凸显出key的作用和效果,无特殊含义
				this.FruitList.unshift({
					id: this.NewFruitId,
					name: this.NewFruitName
				})
				// 由于双向绑定的缘故,为了显示效果,在添加完成后,清空输入框的输入文字
				this.NewFruitName = ''
			}
		}
	});
</script>
测试情况

荐
                                                        Vue中v-for配合key使用的重要性

在上面这个情况中,当我们选中香蕉,再添加一个榴莲时,会发现,之前选中的香蕉变为选中苹果
荐
                                                        Vue中v-for配合key使用的重要性
这显然不是我们想要的效果,我们预期的效果是添加一个水果后,之前选中的水果不会变化。


使用key的情况

<div id="app">
	<div>
		<input type="text" v-model="NewFruitName">
		<!-- 双向绑定文本框的输入到 NewFruitName -->
		<button @click="NewFruit">添加</button>
	</div>
	<ul>
		<li v-for="item in FruitList" :key="item.id">
			<!-- <input type="checkbox"> {{item.name}} -->
			<input name="Fruit" type="radio"> {{item.name}}
		</li>
	</ul>
</div>
<script>
	// 创建 Vue 实例,并将其挂载在id为app的div上
	var vm = new Vue({
		el: '#app',
		data: {
			FruitList: [{
					id: 1,
					name: '苹果'
				},
				{
					id: 2,
					name: '香蕉'
				},
				{
					id: 3,
					name: '橘子'
				}
			],
			NewFruitId: 3,
			// 目前已存在的最大水果id为3
			NewFruitName: '',
			// 新的水果名
		},
		methods: {
			// 添加一个新的水果
			NewFruit() {
				this.NewFruitId = this.NewFruitId + 1;
				// unshift方法,是Array对象的方法,可向数组的开头添加一个或更多元素,并返回新的长度
				// 在这里用该方法,主要是为了凸显出key的作用和效果,无特殊含义
				this.FruitList.unshift({
					id: this.NewFruitId,
					name: this.NewFruitName
				})
				// 由于双向绑定的缘故,为了显示效果,在添加完成后,清空输入框的输入文字
				this.NewFruitName = ''
			}
		}
	});
</script>
测试情况

荐
                                                        Vue中v-for配合key使用的重要性
在上面这个情况中,但我们选中香蕉,再添加一个榴莲时,则没有出现选中的水果错位的情况。这和我们的预期一样。


分析原因

综上所述,使用 key,在 v-for 渲染的元素中,在某些情况下,出现和预期不一样的效果。
这就是因为,在 Vue渲染 的时候,通过只修改元素中的文字,而不重新生成整个元素,来减小渲染强度(只改变元素的2个文字,再添加一个元素,相比于摧毁所有元素,并重新创建所有元素,显然是前者渲染强度小一些。)

关于ESLint的一些观点

在现在大多数的情况下,我们都会使用 Vue CLI 来完成项目,在 Vue CLI 中可以选用 ESLint 来对代码进行一些格式规范、和编码规范。
当然,它有些时候对于编码的格式太过于严苛,而导致很多初期使用的人,会很头疼,这里可以推荐使用 VSCode 配合
Prettier 插件,在保存时,进行自动格式调整。减小在格式调整上花的时间,又同时可以让 ESLint 对编码进行一些检测,比如上面的例子,在 v-for 中,不使用 key,则会不通过检测,并给出相应的提示

以上便是该篇博文的全部内容,欢迎各位访问我的个人博客。作者VicoHu的个人博客
若有任何错误和建议,还希望指教!!!

本文地址:https://blog.csdn.net/weixin_41736818/article/details/107372595

相关标签: Vue vue