用 watch 监听步骤索引变化可精准驱动表单面板切换、数据校验及滚动定位等副作用逻辑；支持多步状态拦截、url 同步与导航守卫，比 v-if 或计算属性更灵活。
用 watch 监听步骤索引变化，驱动表单面板切换
当步骤条的当前索引（如 currentStep）改变时，watch 可以精准捕获这个变化，并触发面板更新、数据校验或滚动定位等逻辑。它比单纯用 v-if 或计算属性更灵活，尤其适合需要副作用（如 API 请求、动画、日志记录）的场景。
监听 step 索引并同步更新显示面板
假设你用一个 ref 存储当前步骤号：
const currentStep = ref(0)
在 setup 中用 watch 监听它：
watch(currentStep, (newStep, oldStep) => {
// 1. 可选：校验上一步是否填写完整
// 2. 更新表单面板渲染逻辑（例如切换 activePanel）
// 3. 滚动到顶部或触发动画
console.log(`步骤从 ${oldStep} 切换到 ${newStep}`);
});
模板中配合 v-if 渲染对应面板：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
结合多步状态做条件拦截
如果用户点击“下一步”但当前步未填完，可借助 watch 配合校验结果阻止跳转：
- 定义 isStepValid = ref(false)，在每步组件内部实时更新该值
- watch [currentStep, isStepValid]，当 step 变化且 isStepValid.value === false 时，自动回退或提示
- 避免使用 deep: true，因为 step 是简单数字，无需深度监听
进阶：监听路由参数实现 URL 同步
若希望步骤切换也反映在地址栏（如 /form/step-2），可监听 $route.params.step：
const route = useRoute();
watch(() => route.params.step, (val) => {
if (val) currentStep.value = parseInt(val) || 0;
});
再配合 beforeEach 导航守卫，确保非法 step 值被重定向，保证状态一致性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
