用 watchEffect 统计问卷完成题数，关键在于为每道题建立独立响应式标记（如 ref 或 reactive 字段），通过直接赋值触发追踪，watchEffect 仅遍历并累加有效值，赋给 completedCount；避免手动计数、中间非响应式值及副作用操作。
用 watchEffect 统计问卷已完成题目数量，关键不是“监听答题动作”，而是让响应式数据自然反映完成状态——每道题答完就更新一个标记，watchEffect 自动汇总并触发统计更新。
把每道题的状态变成响应式变量
不要用普通对象或数组索引判断是否完成，而要为每道题建立独立的响应式标记：
- 用
ref或reactive管理单题状态，例如const q1Done = ref(false) - 或统一用
reactive管理整份问卷：const answers = reactive({ q1: '', q2: null, q3: [] }) - 提交/失焦/选择时，只做赋值操作：
answers.q1 = 'A'或q1Done.value = true - 这样
watchEffect才能真正追踪到变化，而不是读取一个静态计算结果
在 watchEffect 中实时汇总完成数
watchEffect 不负责判断“哪题完成了”，只负责读取并累加所有已标记的状态：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 直接遍历
answers对象，检查每个字段是否有有效值：Object.values(answers).filter(v => v != null && v !== '').length - 或统计布尔标记：
[q1Done, q2Done, q3Done].filter(r => r.value).length - 结果赋给一个
completedCount = ref(0)，模板里直接用{{ completedCount }} - 避免在
watchEffect里写复杂逻辑（如校验规则），只做统计和赋值
配合交互反馈与边界处理
真实问卷中，用户可能跳过、修改、甚至清空答案，统计需稳定可靠：
立即学习“前端免费学习笔记（深入）”；
- 把“完成”定义清楚：是填了内容？还是通过校验？建议以非空值为基准，校验逻辑单独抽离
- 支持动态题目（如根据前题显示后续题）：新题加入时，确保其响应式状态也被纳入统计逻辑
- 初始加载时，如果答案从接口恢复，直接赋值给
answers即可，watchEffect会自动响应 - 不需要手动清理或重置
watchEffect，组件卸载时它自动停止
不推荐的常见误区
这些做法会让统计失效或难以维护：
- 在
watchEffect外部用for循环手动计数再赋值——脱离响应式追踪，变化不触发更新 - 把题目数组转成普通
map或filter结果再传入 —— 中间值不是响应式，watchEffect看不见依赖 - 在
watchEffect里调用 API 或发请求 —— 它只适合轻量同步统计，副作用应由事件处理器触发 - 用
computed替代：虽然也能实现，但watchEffect更适合需要执行 DOM 更新、动画或日志等副作用的场景
