vue中v-for与key

发表于   |   分类于   |     |  

[TOC]

vue官方说：

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

今天碰到个问题，在使用tab切换时，表格的列项顺序并不是定义的顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="tabs">
	<el-radio-group
		v-model="tabs"
		size="small"
		>
		<el-radio-button
		>列表1</ks-el-radio-button>
		<el-radio-button
		>列表2</ks-el-radio-button>
</div>
<section>
	<table>
		<template v-for="item in arr">
			<col :key="item+'1'">a</col>
			<col :key="item+'2'">b</col>
		</template>
	</table>
</section>

当在切换tab的时候，想a列和b列的顺序是调换的，然而由于tab切换时两列的key没有变，先对比新旧dom的key变化，如果新的dom中key值没有变化（不管顺序），那么，尽管新dom的数据项顺序变了，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是使用旧dom的顺序。

热评文章