javascript - 为什么 Vue 使用它是 “in-place patch” ，尽管我在 v-for 循环中绑定(bind)了一个键？

Question

我想用 v-for-loop 生成一个动态的 Vue 组件列表。在该循环中，我正在传递组件使用的数据以及其中的一些子组件。

列表中的项目可以单独删除。因此，为了避免“就地补丁”(https://v2.vuejs.org/v2/guide/list.html)会弄乱子组件，我将一个键绑定(bind)到 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

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

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

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

当您使用它们的 index 作为 key 呈现它们时，您正在识别 {a: 10} by 0 , {a: 20} by 1, {a: 30} by 2 等等上。

当你删除一个shift时，比如说{a: 20}，shifts数组变成:

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

元素标识如下:{a: 10} 0，{a: 30} 1。

以前，key: 1 用于 {a: 20} 但现在它用于 {a: 30} 这会混淆 vue。

这就是为什么 index 不能用作 key 的原因。key 通常应该是元素的唯一标识符，例如数据库 ID。

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

希望这是有道理的