迭代中的元素期望有 “v-bind:key” 指令 - Javascript

在使用 Vue.js 开发应用程序或网站的过程中，您可能会遇到这条警告信息：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Each child in a list should have a unique "key" prop. 

这个警告信息是因为您正在迭代一个列表，并且没有为每一个列表元素指定一个唯一的 "key" 属性，这样任何被添加、移除、排序的元素都会引起必要的区分。这个 key 属性并不是只有 Vue.js 模板使用，它也是 React 中的一种用法。

为什么需要指定 key 属性？

当您更新应用程序状态时，Vue.js 会重新渲染组件的 DOM，如果您没有为每个列表元素定义 key 属性，Vue.js 无法判断哪个元素需要添加、移除、排序。

为降低 DOM 操作成本，Vue.js 在渲染列表时生成一个“虚拟节点树”，如果列表中的元素没有 key，那么每个虚拟节点将与原始的序列相对应，从而导致它们在 DOM 中进行了修改。

例如，当您的用户在一个通讯簿列表中添加一个新联系人时，Vue.js 将对整个列表重新渲染，这样您的用户将看到整个列表的闪烁刷新。

为迭代中的元素提供 key 属性

为了解决这个问题，您可以在渲染列表时为迭代的元素提供一个唯一的 key 属性，这样 Vue.js 可以利用 key 来跟踪每个元素，并尽可能地重用 DOM 元素。

您可以使用 v-bind 指令或 Vue.js 缩写版本“:”来绑定 key 属性。

<ul>
    <li v-for="book in books" v-bind:key="book.id">{{book.title}}</li>
</ul>

在该示例中，key 属性是由每本书籍的唯一标识符组成的。

总结

为您的列表元素提供 key 属性可以帮助 Vue.js 优化您的应用程序性能，并使 DOM 操作更高效，并且不会导致视觉问题。为您的代码提供 key 属性是一个良好的 Vue.js 实践。

更多关于 Vue.js 的信息，请访问 Vue.js 官方网站。

参考文献

• Vue.js 官方文档