Vue3子组件未更新：点击后数据更新但HTML不渲染

问题现象 #

点击项目时，Vue Chrome开发者工具显示数据已更新，但页面HTML视图并未同步刷新。

问题根源 #

父组件中初始化了响应式变量items = ref([])，但在onMounted钩子中直接用items = response.room.items替换了整个变量，这会破坏Vue3的响应式关联——ref的响应式依赖于其.value属性，直接替换变量会丢失原有的响应式包装，导致后续数据变更无法触发视图更新。

修复方案 #

1. 正确更新ref变量的响应式值
   修改父组件onMounted中的赋值逻辑，通过.value更新数组：

   onMounted(async () => {
     var response = await api.getRoom(game.value, roomName.value)
     // 替换为对ref的value属性赋值，保留响应式
     items.value = response.room.items
     roomHub.joinRoom(game.value, roomName.value)
   })
   

2. 给v-for添加唯一key（推荐）
   子组件的v-for循环添加唯一标识key，避免Vue复用DOM节点导致的视图异常：

   <div v-for="(item, i) in items" :key="item.id" @click="$emit('toggleCollected', i)">
     {{ item }}
   </div>
   

   注：如果item没有唯一id，也可以使用索引i作为key，但仅当数组不会重新排序、增删元素时推荐使用。

3. 额外验证：确保子组件接收的props是响应式的
   由于父组件修复后items是响应式数组，子组件通过props接收的items会自动保持响应式，无需额外处理。

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