vue 组件内使用 ref([]) 存储多个字典对象时，若每次点击都“看似清空重置”，实际是组件被意外销毁重建导致响应式引用重初始化；需通过生命周期验证、状态提升或组件复用避免重复实例化。
vue 组件内使用 ref([]) 存储多个字典对象时，若每次点击都“看似清空重置”，实际是组件被意外销毁重建导致响应式引用重初始化；需通过生命周期验证、状态提升或组件复用避免重复实例化。
在 Vue 3 的 <script setup> 语法中，const QuizToSub = ref([]) 创建的是一个组件实例级的响应式引用。当组件被卸载（unmounted）后重新挂载（mounted），该 ref 会随组件实例一起被销毁并重建，从而重置为初始空数组 —— 这正是你观察到“字典被覆盖”或“历史数据消失”的根本原因，而非 .push() 操作本身有问题。
? 验证组件是否被重复创建
首先确认问题根源：在组件中添加 Vue 2 风格的 created 钩子（Vue 3 仍支持 Options API 钩子，即使在 <script setup> 中也可混合使用）：
// 在 <script setup> 内部下方添加（注意：需配合 defineOptions）
import { defineOptions } from 'vue'
defineOptions({
created() {
console.log(`[Survey #${id}] 组件已创建，QuizToSub 当前长度：`, this.QuizToSub?.value?.length ?? 0)
}
})✅ 正确行为：仅页面首次加载时打印一次；
❌ 异常表现：每次切换题块（scroll to next section）都触发新日志 → 表明组件被反复销毁重建。
✅ 推荐解决方案（按优先级排序）
方案一：状态提升（推荐 ✅）
将 QuizToSub 状态上移至父组件，子组件仅接收并更新它：
<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import Survey from './Survey.vue'
const QuizToSub = ref([])
const handleResponse = (response, question) => {
QuizToSub.value.push({ qst: question, rep: response })
}
</script>
<template>
<Survey
v-for="(q, idx) in quizList"
:key="q.id"
:QuizData="q"
:id="idx"
:on-response="handleResponse"
/>
</template><!-- Survey.vue -->
<script setup>
const props = defineProps({
QuizData: { type: Object, required: true },
id: { type: Number, required: true }
})
const emit = defineEmits(['response'])
const scrollToNext = (response) => {
emit('response', response, props.QuizData.question)
const nextSection = document.getElementById(`${props.id + 2}`)
nextSection?.scrollIntoView({ behavior: 'smooth' })
}
</script>✅ 优势：状态集中管理、组件可复用、符合 Vue 响应式设计原则；
⚠️ 注意：确保父组件中 quizList 不因响应式变化意外触发子组件全量重渲染（如使用 v-for 时 key 稳定）。
方案二：避免组件销毁（进阶 ✅）
若必须保留在子组件内维护状态，可通过 v-show 替代 v-if 控制显隐，或使用 <KeepAlive> 缓存组件实例：
立即学习“前端免费学习笔记（深入）”；
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
<!-- 父组件中 -->
<KeepAlive>
<Survey
v-if="currentSection === 'survey'"
:QuizData="currentQuiz"
:id="currentIndex"
/>
</KeepAlive>? <KeepAlive> 会缓存组件实例及其内部 ref 状态，避免重复初始化。
方案三：本地持久化兜底（辅助 ⚠️）
仅作补充，不建议作为主方案（如需离线支持或防刷新丢失）：
// 使用 sessionStorage 持久化（注意序列化限制）
const persistQuizData = (data) => {
sessionStorage.setItem('QuizToSub', JSON.stringify(data))
}
const loadQuizData = () => {
const saved = sessionStorage.getItem('QuizToSub')
return saved ? JSON.parse(saved) : []
}
const QuizToSub = ref(loadQuizData())
// 每次 push 后同步保存
QuizToSub.value.push(quizDict)
persistQuizData(QuizToSub.value)⚠️ 注意：sessionStorage 无法跨标签页共享，且不支持函数/Date/Map 等非序列化值；仅适用于纯 JSON 数据。
? 总结
- ❌ 错误归因：“.push() 覆盖对象” → 实际是 ref([]) 所在组件被重建；
- ✅ 根本解法：状态外提 或 组件实例复用；
- ? 快速诊断：用 created 钩子日志确认组件生命周期；
- ? 最佳实践：Survey 类表单组件应由父级统一管理答题状态，子组件专注 UI 与事件分发。
通过以上任一方式，即可确保每次 scrollToNext 都向同一数组追加新字典，真正实现多题答案的累积存储。
