为什么 Vue 使用它的“就地补丁”，尽管我在 v-for 循环中绑定了一个键？

Question

我想使用 v-for 循环生成 Vue 组件的动态列表。在那个循环中，我传递了组件使用的数据，还有其中的一些子组件。

列表中的项目可以单独删除。因此，为了避免“就地补丁”（https://vuejs.org/v2/guide/list.html）会弄乱子组件，我将键绑定到 for 循环。但它不起作用。

<div v-for="(shift, index) in shifts"  v-bind:key="index">
  <hr>
    <Shift v-bind:shiftdata="shifts[index]" v-on:DeleteShift="DeleteShift" />
  <hr>
</div>

如果我现在删除一个位于中间的组件，它的子组件将被渲染到另一个组件中。

另一件让我感到困惑的事情是，如果我将“shift”而不是“index”作为键，它就可以正常工作。但是我收到警告，因为“键是非原始值”和“检测到重复键”。

Answer 1

发生这种情况是因为keys 是在 for 循环中呈现的项目的标识符。当一个元素发生变化时，它们有助于防止重新渲染所有内容。

现在，假设您有以下shifts数组：

shifts = [{a: 10}, {a: 20}, {a: 30}]

当您使用它们index作为 the呈现这些时key，您正在识别{a: 10}by 0、{a: 20}by 1、{a: 30}by2等等。

当您删除 a 时shift，例如{a: 20}，shifts数组变为：

shifts = [{a: 10}, {a: 30}]

元素标识如下： {a: 10}by 0, {a: 30}by 1。

之前key: 1是 for{a: 20}但现在是 for {a: 30}which 混淆了 vue。

这就是为什么将indexs 用作keys是一件坏事。 keys 通常应该是元素的唯一标识符，例如数据库 ID。

如果您的shift对象中有任何此类实体，我建议您将其用作key

希望这是有道理的