本文详解 Vue 3 响应式数组（如 ref([])）在组件重复挂载/销毁时被重置的问题，指出根本原因是组件意外重建导致 ref 初始化重执行，并提供父级托管状态、避免组件卸载等专业解决方案。
本文详解 vue 3 响应式数组（如 `ref([])`）在组件重复挂载/销毁时被重置的问题，指出根本原因是组件意外重建导致 `ref` 初始化重执行，并提供父级托管状态、避免组件卸载等专业解决方案。
在 Vue 3 的问卷类组件（如 Survey）中，常见需求是：每次点击选项（resp），将当前题目与回答封装为字典（如 { qst: '...', rep: '...' }）并追加至数组 QuizToSub，后续统一提交。但开发者常遇到“新对象覆盖旧对象”或“数组始终只有一项”的假象——实际并非数据被覆盖，而是整个 ref([]) 数组在组件重新创建时被重置为空数组。
? 根本原因：组件意外重建
Vue 组件若因条件渲染（如 v-if）、动态路由切换或父组件强制重渲染而被销毁并重建，其 setup() 中定义的 ref([]) 将重新执行，导致历史数据丢失：
// ❌ 危险写法：ref 在每次组件实例化时都会重置 const QuizToSub = ref([]);
可通过生命周期钩子快速验证是否发生重建：
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章