vue 3 中 v-for 渲染列表响应更新的关键在于数据是否响应式：数组可用 reactive 或 ref（需 .value 操作），对象列表须用 reactive；修改需触发 proxy 拦截；key 必须唯一稳定；遍历对象时 obj 必须为 reactive。
Vue 3 模板中渲染数组和对象列表时，响应更新能否生效，关键不在模板写法本身，而在于数据是否真正具备响应式能力——v-for 只负责“画”，不负责“动”；动不动，取决于你用 reactive 还是 ref 包装数据。
数组列表：用 reactive 或 ref 都可以，但修改方式必须合规
直接用 v-for="item in list" 渲染数组没问题，但要让视图随数组变化自动更新，得满足两个条件：
- 数据本身是响应式的：推荐用
reactive([])创建；若用ref([])，后续读写必须通过.value（比如list.value.push(x)） - 修改操作触发 Proxy 拦截：Vue 3 的 Proxy 天然支持数组所有操作，包括
push、pop、splice、甚至arr[0] = x和arr.length = 0，全部能触发更新 - 避免绕过响应式系统：不要用
Object.assign(arr, [...newArr])或直接赋值arr = newArr（这会丢失响应性），应改用arr.splice(0, arr.length, ...newArr)或arr.length = 0; arr.push(...newArr)
对象列表：优先用 reactive，别用 ref 包对象
如果列表项是对象（如 [{id:1,name:'a'}, {id:2,name:'b'}]），且你需要动态增删字段或嵌套更新，务必用 reactive：
-
const list = reactive([{id:1,name:'a'}])—— 后续可安全执行list[0].name = 'A'或list[0].status = 'done'，视图立刻响应 - 若错误地用
const list = ref([{id:1,name:'a'}])，再写list.value[0].name = 'A'虽然能改值，但不会触发更新（ref 对象内部属性不自动转响应式） - 需要给对象新增顶层属性？不用
Vue.set，直接赋值即可，Proxy 全支持
v-for 中的 key 不只是性能优化，更是更新逻辑的锚点
每个循环项必须绑定唯一且稳定的 :key，否则 Vue 无法精准追踪节点复用与销毁：
