v- for 中的key为什么不建议使用index

Question

当循环一个数组例如[{name:'1'},{name:'2'},{name:'3'}]时，删除第二项

<template>
  <hello-world
    v-for="(item, index) in arr"
    :key="index"
    :count="item.count"
    :name="item.name"
    @del="del(index)"
  ></hello-world>
</template>

<script setup>
import { reactive } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

const arr = reactive([
  { name: "第一个", count: 1 },
  { name: "第二个", count: 2 },
  { name: "第三个", count: 3 },
]);

const del = (index) => {
  console.log("删除", index + 1);
  arr.splice(index, 1);
};
</script>

<template>
  <div>
    <span>{{ name }}</span>
    <span>count: {{ innerCount }}</span>
    <a @click="del">删除</a>
  </div>
</template>

<script setup>
import { defineEmit, defineProps, reactive } from "vue";

const props = defineProps({
  name: "",
  count: "",
});

const emit = defineEmit(["del"]);
const del = () => {
  emit("del");
};

const innerCount = props.count;
</script>

Answer 1

Sunday 2023-08-14 21:15:56

你好

key的话期望使用《唯一且不会发生变化的数据》，而 index 是可能发生变化的（比如 unshift）