一、题目
当循环遍历并在添加数组元素是,每次都是按顺序和已有的数组元素比较,这样就导致如果从头部添加数据时,每次比较的数据都不相同,如图所示。
这样vue就识别不出来已有的元素和添加新元素后的新数组是否有相同元素,vue 就会按照添加新元素后的新数组 进行重新操作。增加虚拟dom的操作。
而如果给数组元素添加key,那vue就会只比较key相同的元素,虚拟dom只会操作没有对应key的新元素
二、案例代码
(1)不添加key
<script>
import { ref, reactive } from "vue";
export default {
setup() {
//1.首先声明一个数组
const arr = ref(["A", "B", "C"]);
const add = () => {
arr.value.unshift(Math.random());
};
return {
arr,
add,
};
},
};
</script>
<template>
<hr />
<button @click="add">添加</button>
<hr />
<p v-for="arr in arr"><input type="checkbox" />{{ arr }}</p>
</template>
(2)添加key
<script>
import { ref, reactive } from "vue";
export default {
setup() {
//1.首先声明一个数组
const arr = ref(["A", "B", "C"]);
const add = () => {
arr.value.unshift(Math.random());
};
return {
arr,
add,
};
},
};
</script>
<template>
<hr />
<button @click="add">添加</button>
<hr />
<p v-for="arr in arr" :key="arr"><input type="checkbox" />{{ arr }}</p>
</template>
三、运行结果比较
(1)无key
(2)有key