Vue 中响应式数组存储对象时数据覆盖的解决方案

vue 组件中使用 ref 声明的数组在多次 push 字典对象后看似“被覆盖”，实则是组件意外卸载重建导致 ref 初始化重置，需通过生命周期排查或提升状态至父组件来持久化数据。

vue 组件中使用 ref 声明的数组在多次 push 字典对象后看似“被覆盖”，实则是组件意外卸载重建导致 ref 初始化重置，需通过生命周期排查或提升状态至父组件来持久化数据。

在 Vue 3 的 <script setup> 语法中，const QuizToSub = ref([]) 创建了一个响应式空数组，每次调用 scrollToNext() 时向其中 push 一个新对象 { qst: ..., rep: ... } —— 理论上应累积保存所有答题记录。但若发现数组长度始终为 1 或日志显示内容被“覆盖”，根本原因往往不是 push 本身出错，而是该组件在切换题干（如滚动到 nextSection）过程中被 Vue 卸载并重新挂载，导致 ref([]) 被重复初始化，历史数据丢失。

✅ 快速诊断：确认组件是否被重建

在组件中添加生命周期钩子（需配合 <script> 选项式写法临时辅助调试）：

<script>export default {  created() {    console.log(`[Survey #${this.id}] 组件已创建 —— QuizToSub 当前长度：`, this.$parent?.QuizToSub?.value?.length ?? 'N/A');  }}</script>

⚠️ 注意：<script setup> 中无法直接使用 created，可改用 onBeforeMount（需从 vue 显式导入）：

import { onBeforeMount } from 'vue'onBeforeMount(() => {  console.log(`[Survey #${id}] mounted —— QuizToSub.length: ${QuizToSub.value.length}`)})

若每次点击“下一题”都触发该日志，则说明组件正在被销毁重建 —— 这是问题根源。

立即学习“前端免费学习笔记（深入）”；

✅ 根本解决：两种推荐方案

方案一：将状态提升至父组件（推荐 ✅）

由父组件统一管理答题数据，子组件仅负责收集与提交：

<!-- Parent.vue --><script setup>import { ref } from 'vue'import Survey from './Survey.vue'const quizResponses = ref([])const handleResponseSubmit = (qst, rep) => {  quizResponses.value.push({ qst, rep })}</script><template>  <Survey     v-for="(item, idx) in quizList"     :key="idx"    :QuizData="item"     :id="idx"    @submit-response="handleResponseSubmit"  /></template>

<!-- Survey.vue --><script setup>const emit = defineEmits(['submit-response'])const scrollToNext = (response) => {  emit('submit-response', QuizData.question, response)  // ... 滚动逻辑保持不变}</script>

方案二：避免组件卸载（适用于单页多节平滑切换）

确保 v-if 或路由切换不销毁组件。例如：

• ❌ 错误：<div v-if="currentStep === 2"><Survey /></div> → 步骤变更时组件销毁
• ✅ 正确：<div v-show="currentStep === 2"><Survey /></div> → 仅隐藏，不卸载
• 或使用 <KeepAlive> 包裹动态组件，缓存实例状态：

  <KeepAlive>  <component :is="currentSurveyComponent" /></KeepAlive>

? 补充提醒

• ref([]).value.push(obj) 是安全的，Vue 能正确触发响应式更新；无需 ref([...oldArr, newObj]) 替换整个数组。
• 若仍需在子组件内维护局部状态，请检查模板中是否存在 v-if、key 频繁变更、或嵌套路由未配置 keep-alive。
• 控制台打印 QuizToSub.value 时，注意 Chrome 可能显示“实时引用”，展开后看到的是当前值 —— 建议用 console.log(JSON.parse(JSON.stringify(QuizToSub.value))) 固定快照验证。

通过状态提升或组件保活，即可确保答题数据稳定累积，彻底解决“字典被覆盖”的表象问题。