用 vue 基础语法实现多步骤表单需聚焦步骤切换与数据留存：用 ref 控制 activestep 索引配合 v-if 显隐各步；用 reactive 统一管理 formdata 实现跨步数据持久；可选 keep-alive 缓存组件状态；通过事件透传统一处理选项联动。
用 Vue 基础语法实现多步骤表单，关键不在堆砌组件，而在于理清「步骤切换」和「数据留存」两个核心动作。不需要 Vuex、不依赖第三方库，纯响应式 + 模板指令就能跑通完整流程。
用 ref 控制当前步骤索引
定义一个响应式变量记录用户走到哪一步，比如 activeStep，初始值为 0。每点击“下一步”，就加 1；点“上一步”就减 1。配合 v-if 控制每个步骤区域的显隐：
- 步骤容器用
<div v-if="activeStep === 0">、<code><div v-if="activeStep === 1"> 分开写，避免 DOM 冗余 <li>按钮逻辑直接操作 <code>activeStep.value，注意边界判断（如不能小于 0 或超过最大步数） - 进度条或步骤指示器（如
<van-steps :current="activeStep"></van-steps>）自动跟随更新，无需额外同步 - 第一步输入框写
v-model="formData.userName"，第二步写v-model="formData.userEmail" - 即使用户跳回上一步，数据仍在
formData里，不会丢失 - 提交时只需把整个
formData当作最终 payload 发送，结构清晰、无遗漏 - 写法：
<keep-alive><div v-if="activeStep === 0">...</div></keep-alive> - 组件实例被缓存，data、v-model 绑定值、甚至 input 光标位置都原样保留
- 注意：keep-alive 不影响 reactive 数据本身，它只是让组件不重渲染，两者配合效果更稳
- 子组件内：
@click="$emit('select', { key: 'userGender', value: 'Female' })" - 父组件监听：
@select="handleSelect"，然后在方法里同时赋值formData[key] = value和推进activeStep++ - 这样避免为每个字段写单独事件，逻辑集中、易维护
用 reactive 管理跨步骤表单数据
所有步骤填写的内容，统一收进一个 reactive 对象，字段名按业务语义命名（如 userName、userEmail、userGender）。每步只绑定对应字段：
用 keep-alive 缓存已填内容（可选但实用）
如果用户需要频繁来回切换步骤（比如修改前面信息），单纯靠 v-if 会销毁并重建组件，导致输入框失焦、滚动位置丢失。这时给步骤容器包一层
用事件透传做动态选项联动（进阶技巧）
当某步是选择题（如性别、职业），点击后既要存值又要跳转，推荐子组件只 emit 一个事件，带齐上下文：
