我们还需要为每个组件提供一个"key“vuejs

Question

<div id="app-7">
  <ol>
    <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key"
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

我的问题是，为什么我们还需要为每个组件提供一个"key“，其中任何可以帮助我理解的示例请

Answer 1

出于性能的目的，Vue使用key属性来“跟踪”由v-for循环呈现的每个节点。你可以在这里找到更多信息https://vuejs.org/v2/guide/list.html#key

Answer 2

当Vue更新使用v-for呈现的元素列表时，默认情况下它使用“就地补丁”策略。如果数据项的顺序已更改，则Vue将就地修补每个元素，并确保它反映应该在该特定索引处呈现的内容，而不是移动DOM元素以匹配项的顺序。这类似于Vue 1.x中track-by="$index“的行为。

那是来自docs