Vue 3 的 computed 可动态推导表单进度：通过封装各步骤字段完成状态为响应式计算属性，汇总计算已完成步数与百分比，并反推当前激活步骤；支持条件分支，逻辑融入对应步骤的 computed 中。

Vue 3 的 computed 可以通过组合多个表单字段的完成状态，动态推导出当前进度百分比或步骤索引。核心是把“哪些字段已填”、“哪一步可进入”这些逻辑封装成响应式计算属性，而不是手动维护进度变量。

用字段有效性判断每步完成度

每一步表单通常对应一组必填字段（如 step1 对应 name 和 email）。你可以为每步定义一个计算属性，检查其关键字段是否非空且合法：

• 用 ref 或 reactive 管理表单数据，确保响应性
• 每步写一个 computed 返回布尔值，例如：
  const step1Completed = computed(() => form.name && form.email && isValidEmail(form.email));
• 把所有步骤的完成状态汇总成数组，再用 filter(Boolean).length 算出已完成步数

进度百分比 = 已完成步数 ÷ 总步数 × 100

只要步骤总数固定（比如共 4 步），就能用简单算术得出实时进度：

• const totalSteps = 4;
• const completedSteps = computed(() => [step1Completed, step2Completed, step3Completed, step4Completed].filter(v => v).length);
• const progressPercent = computed(() => Math.round((completedSteps.value / totalSteps) * 100));

这样修改任意字段，progressPercent 都会自动更新，无需 watch 或事件触发。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

立即学习“前端免费学习笔记（深入）”；

当前激活步骤可由进度反推

除了百分比，你可能还需要知道“用户现在在第几步”。这可以用 computed 找到第一个未完成的步骤索引：

• const currentStep = computed(() => {
•   const steps = [step1Completed, step2Completed, step3Completed, step4Completed];
•   const firstIncomplete = steps.findIndex(v => !v);
•   return firstIncomplete === -1 ? steps.length : firstIncomplete + 1;
• });

例如：step1、step2 完成，step3 没填 → firstIncomplete = 2 → currentStep = 3，正好指向第三步。

支持跳步或条件分支时的处理建议

如果某些步骤是否显示取决于前面的选择（如“是否需要发票？”决定是否展示发票信息页），就把条件逻辑融入对应步骤的 computed 中：

• 给条件字段（如 needInvoice）加 ref
• step4 的完成判断变成：
  const step4Completed = computed(() => !form.needInvoice || (form.invoiceTitle && form.taxId));
• 这样即使 step4 被隐藏，它的完成状态仍合理参与进度计算，避免进度卡住或跳变