用 Composition API 实现多步骤向导表单暂存，核心是分离步骤控制（ref 管理 activeStep）与数据聚合（reactive 统一收集 formData），配合 v-if 控制渲染、keep-alive 缓存组件状态，并通过事件透传统一处理联动跳转。
用 Composition API 处理多步骤向导表单的数据暂存，核心是把「步骤控制」和「数据聚合」拆开管理，再通过组合式函数封装成可复用逻辑。不需要 Pinia 或 Vuex，纯响应式 API 就能稳住状态。
用 ref 管理当前步骤索引
定义一个 ref 控制流程位置，比如 activeStep，初始值为 0：
- 每点“下一步”就
activeStep.value++，点“上一步”就-- - 加边界判断：不能小于 0，也不能超过最大步数（如
steps.length - 1） - 模板中用
v-if="activeStep === 0"、v-if="activeStep === 1"分离各步 DOM，避免冗余渲染
用 reactive 统一收集所有字段值
所有步骤的输入都写进同一个 reactive 对象，字段名按业务语义命名：
- 比如
formData = reactive({ userName: '', userEmail: '', userGender: '' }) - 每步只绑定自己关心的字段：
<input v-model="formData.userName">、<select v-model="formData.userGender"> - 用户来回切换步骤时，数据始终保留在
formData里，不会清空或重置
用 keep-alive 缓存已填内容（按需启用）
如果步骤组件含复杂交互（如带搜索的下拉、富文本、滚动位置），单纯 v-if 会导致组件销毁重建。这时包一层 <keep-alive>：
- 写法：
<keep-alive><div v-if="activeStep === 0">...</div></keep-alive> - 组件实例被缓存，输入框焦点、选择状态、滚动条位置都保留
-
reactive数据本身不受影响，两者配合更可靠
用事件透传统一处理选项联动
当某步是点击卡片/按钮选值并跳转（如选性别后自动进下一步），推荐子组件只发一个结构化事件：
- 子组件内：
@click="$emit('select', { key: 'userGender', value: 'Female' })" - 父组件监听：
@select="handleSelect"，在方法里同时赋值 + 推进：formData[key] = value; activeStep.value++ - 避免为每个字段写单独事件处理器，逻辑集中、易扩展
