用于vue.js的唯一键是什么？

Question

我的意思是:

假设我们在自定义vue组件中有一个v-for指令,使用方式如下:

<my-custom-component v-for="item in items" :key="item.id">{{item.remark}}</ my-custom-component>

:key="item.id"在这里使用的目的是什么？

Answer 1

通常在v-for循环中,数组元素排序的改变可能导致不希望的行为.例如,想象一下,如果您的子组件恰好是包含您已填写的数据的输入的表单.如果您重新排序数组,那么输入信息不会随您的数组元素移动!您可能希望在重新排序数组时,子组件中所做的任何更改都将随这些数组元素一起移动.

有一个独特的key解决了这个问题.该key行为作为一种标志,它告诉Vue公司"如果与这个孩子组件相关的数据被移动别处,然后将组件与它一起保存已存在的变化".

这些都在文档中解释.我强烈建议您仔细阅读本节内容.

建议您不要将数组索引用作唯一ID值,因为它与使用no基本相同key.而是id在数据中包含一个从一开始就初始化的字段.然后,你可以这样做:key="item.id"或:key="'child-component-'+item.id".