我的意思是:

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

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

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

推荐答案

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

拥有一个独一无二的key解决了这个问题.key作为一种标志,告诉Vue"如果与该子组件相关联的数据被移动到其他地方,则将该组件与其一起移动,以保留已经存在的更改".

这些都在the documentation页中解释.我强烈建议您仔细阅读本节.

建议您使用数组索引作为唯一id值,因为这与使用no key基本相同.相反,在数据中包含一个id字段,从一开始就进行初始化.然后,你可以做:key="item.id":key="'child-component-'+item.id"之类的事情.

Vue.js相关问答推荐

可组合数据获取示例

绑定事件在渲染函数中不起作用

v-on 的 .native 修饰符仅在组件上有效,但在 标签上使用

有什么理由不在 vue3 中使用