Vue3循环遍历有key和无key

一、题目

    当循环遍历并在添加数组元素是，每次都是按顺序和已有的数组元素比较，这样就导致如果从头部添加数据时，每次比较的数据都不相同，如图所示。

这样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