Vue 3迁移v-for时因key使用导致作用域异常问题求助

问题原因 #

这个问题的核心是Vue2和Vue3在响应式系统与v-for组件复用逻辑上的差异共同导致的：

1. 响应式系统的变化：Vue2会自动将模板中用到的普通对象转为响应式，所以你修改subarray时能触发对应组件的更新；但Vue3仅对通过reactive/ref显式创建的对象做响应式处理，你的computed返回的是普通对象数组，这些对象在Vue3中不是响应式的，修改subarray无法正确触发更新。
2. 索引key的复用风险：当主组件因任何原因重新渲染时，computed会返回全新的数组和对象实例。由于你用索引作为key，Vue3的diff算法会复用现有子组件实例，将新对象传入。但子组件之前修改的是旧对象实例，新旧对象引用不同，最终导致渲染结果错位。

在Vue2中，自动响应式转换掩盖了索引key的潜在问题，所以代码能正常工作；但Vue3中缺少这个自动转换，加上组件实例复用，就出现了你看到的错误。

解决方案 #

你可以通过以下两种方式修复：

方案1：将对象转为响应式（快速修复）

修改computed的定义，用reactive把每个item转为响应式对象：

import { computed, reactive } from 'vue';

let items = computed(() => [ 
  reactive({ subarray:[] }), 
  reactive({ subarray:[] }) 
]);

这样每个item都是响应式的，修改subarray时Vue3能正确检测到变化，触发对应子组件更新。

方案2：使用唯一标识作为key（推荐）

避免用索引作为v-for的key，给每个item添加唯一id：

let items = computed(() => [ 
  { id: 1, subarray:[] }, 
  { id: 2, subarray:[] } 
]);

然后在v-for中用id作为key：

<div v-for="(item, i) in items" :key="item.id">
  <X :item="item"></X>
</div>

这样Vue3的diff算法会基于唯一id匹配组件实例，不会出现复用错误，即使对象是普通类型也能保证渲染正确。

另外，更符合Vue单向数据流原则的做法是把修改逻辑放在父组件，子组件通过事件触发：

<!-- 主组件 -->
<div v-for="(item, i) in items" :key="item.id">
  <X :item="item" @add="addItem(i)"></X>
</div>

<script setup>
import { computed, reactive } from 'vue';

let items = computed(() => [ 
  reactive({ id:1, subarray:[] }), 
  reactive({ id:2, subarray:[] }) 
]);

function addItem(index) {
  items.value[index].subarray.push("abc");
}
</script>

<!-- 子组件X -->
<div v-for="i in item.subarray"> {{ i }} </div>
<button @click="$emit('add')">添加</button>

<script setup>
defineProps({ item: Object });
defineEmits(['add']);
</script>

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