Vue 2子组件加载草稿数据后丢失问题咨询

这不是预期行为 #

数据丢失的核心原因是v-if的特性：当v-if条件不满足时，组件会被完全销毁，对应的实例和数据都会被清空；当条件重新满足时，组件会重新创建并初始化新实例。你在DevTools中看到数据先存在后清空，大概率是调用loadDraftAnswers时子组件因v-if条件处于激活状态，但后续切换问卷页面（或其他操作导致v-if条件变化），组件被销毁，数据自然丢失。而你使用的v-show仅做CSS层面的隐藏，组件实例始终存在，不会出现这类问题。

解决方法 #

根据你的场景，推荐以下几种可行方案：

1. 替换v-if为v-show

如果子组件的显示/隐藏不需要销毁实例，直接把v-if改成v-show。这样组件实例会一直保留在DOM中（仅视觉隐藏），加载的草稿数据不会因为页面切换而丢失，是最直接的解决方案。

2. 将草稿数据提升到父组件统一管理

把各子组件的草稿数据移到父组件RiskAssessmentTest.vue的data中，子组件通过props接收数据，请求到草稿后通过emit将数据传递给父组件保存。

父组件示例：

<template>
  <div>
    <Question1 
      v-show="currentPage === 1" 
      ref="q1" 
      :draft-data="draftAnswers.q1"
      @save-draft="saveDraftAnswer"
    />
    <!-- q2-q5子组件依此类推 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      draftAnswers: {
        q1: null,
        q2: null,
        q3: null,
        q4: null,
        q5: null
      }
    }
  },
  methods: {
    handleLoadDraft(testId) {
      this.$refs.q1.loadDraftAnswers(testId, 1);
      // 触发其他子组件的草稿加载逻辑
    },
    saveDraftAnswer({ question, data }) {
      this.draftAnswers[question] = data;
    }
  }
}
</script>

子组件示例：

<script>
import axios from 'axios';
export default {
  props: ['draftData'],
  methods: {
    async loadDraftAnswers(testId, questionNum) {
      const res = await axios.get(`/api/drafts/${testId}/q${questionNum}`);
      this.$emit('save-draft', { 
        question: `q${questionNum}`, 
        data: res.data 
      });
    }
  }
}
</script>

这种方式下，即使子组件因v-if被销毁，数据会保存在父组件中，下次渲染时通过props传入即可恢复，从根源避免数据丢失。

3. 用<keep-alive>缓存组件

如果必须保留v-if（比如组件初始化开销大，需要销毁释放资源），可以用<keep-alive>包裹子组件，让组件在v-if条件不满足时被缓存而非销毁，再次渲染时复用缓存的实例和数据。

父组件示例：

<keep-alive>
  <Question1 v-if="currentPage === 1" ref="q1" />
  <Question2 v-if="currentPage === 2" ref="q2" />
  <!-- 其他子组件依此类推 -->
</keep-alive>

注意，<keep-alive>会缓存组件状态，若需要在组件激活时更新数据，可以使用activated钩子函数处理。

内容的提问来源于stack exchange，提问作者Jesse Luke Orange