Vue中v-for作用于父容器时嵌套组件数据丢失问题咨询

这其实是Vue列表渲染里key的作用和组件复用逻辑导致的典型问题，官方文档在列表渲染的章节其实有相关说明，可能你之前没留意到细节～

两种场景的核心差异解析 #

我们来拆解下为什么两种写法会有完全不同的表现：

1. 预期行为的场景（v-for直接绑在组件上）

你的代码大概是这样的：

<comp v-for="item in items" :key="item.uuid" />

这里v-for直接作用在组件上，而且给每个组件都设置了唯一且稳定的key（也就是item.uuid）。当你点击unshift往数组头部加元素时：

• Vue的虚拟DOM对比算法会通过这个key精准识别：原来的组件实例对应的item并没有消失，只是在列表里的位置往后挪了
• 所以Vue会直接复用现有的组件实例，只是调整它们在DOM里的顺序，组件内部的自然就完整保留下来了

2. 出现异常的场景（v-for作用在包裹的div上）

你的异常代码是这样的：

<div v-for="item in items">
  <comp :key="item.uuid" />
</div>

问题就出在这个包裹用的div没有设置显式的key！Vue默认会把数组的索引当作这个div的key。当你unshift新元素后：

• 原来的每个div对应的索引都从0、1...变成了1、2...，对于Vue来说，这些div的“身份标识”（索引key）变了
• Vue会误以为这些是全新的div节点，于是会直接销毁原来的div和里面的组件实例，然后重新创建新的div和组件
• 组件实例都被销毁重建了，之前存的自然就丢了

官方文档的相关说明 #

Vue官方在列表渲染 - 用key维护状态这部分明确提到过：

当Vue更新v-for渲染的列表时，默认会用“就地更新”的策略。如果数据顺序变了，Vue不会移动DOM元素去匹配，而是就地更新每个元素，确保它们在对应索引位置渲染正确。

这个默认模式效率很高，但只适用于那些不依赖子组件状态或临时DOM状态（比如表单输入值）的列表。

要让Vue能跟踪每个节点的身份，从而重用和重新排序现有元素，你得给每个列表项提供一个唯一的key属性。

说白了就是：如果列表里的元素（这里就是那个div）没有稳定的key，Vue没法正确识别它的身份，就会销毁重建，连带子组件的状态一起丢了。

怎么修复？ #

很简单，给包裹的div也加上和子组件一样的唯一key就行：

<div v-for="item in items" :key="item.uuid">
  <comp :key="item.uuid" />
</div>

这样Vue就能准确识别每个div对应的item，unshift新元素时只会调整DOM顺序，复用现有的div和组件实例，状态就不会丢失啦～

内容的提问来源于stack exchange，提问作者m0etaz