计算属性管理动态微任务表单校验,核心是将纯读取型校验逻辑剥离至响应式计算属性中,规则以配置对象统一收口,支持嵌套路径、缓存正则与异步函数,每字段绑定独立计算属性返回{valid,message},动态结构通过id/索引生成唯一校验键,新增删除自动响应,联动校验由响应式依赖自动触发且零副作用。
用计算属性管理动态微任务表单校验,关键在于把“校验逻辑”从状态更新中剥离出来——它不修改数据、不发起请求、不手动触发,只专注读取当前上下文并返回校验结果。这样既保持响应式联动,又让规则可配置、可测试、可复用。
校验规则统一收口为配置对象
所有字段的校验条件(如必填、长度、正则、跨字段依赖)都定义成纯 JS 对象或 JSON 结构,不写在 methods 或 watch 里。例如:
- 每个字段对应一个规则条目,含 required、minLength、pattern、validator 等键
- 支持嵌套路径,如 tasks.0.title 或 details.1.answer,适配微任务的多层结构
- 正则和异步校验函数提前缓存,避免在 computed 中重复创建实例或闭包
每个字段绑定独立的校验计算属性
为每个输入项(包括动态新增的微任务行)声明一个计算属性,返回 { valid: boolean, message: string } 格式。它只读取本字段值 + 相关上下文(如其他字段、开关状态、当前任务阶段)。
- 例如:taskTitleRule 检查非空 + 长度 + 是否与已有标题重复(调用已封装的 checkTitleUnique 函数)
- 再如:taskDeadlineRule 读取 taskType 和 deadline,仅当类型为「紧急」时校验截止时间不得晚于 24 小时后
- 模板中直接使用 :class="{ error: !taskTitleRule.valid }" 或显示 taskTitleRule.message
动态结构靠 key 构建唯一校验路径
微任务常以数组形式存在(如 tasks: [{ id: 't1', title: '' }, { id: 't2', title: '' }]),需为每项生成带标识的校验计算属性。
- 用 id 或索引拼接字段名,如 title-t1、assignee-t2
- 通过 computed 动态生成整套 rules 对象,结构严格对齐 UI 框架要求(如 Element Plus 的数组格式、uView 的嵌套对象)
- 新增/删除任务项时,Vue 自动清理或新建对应计算属性,无需手动维护 watch 或事件监听
联动校验靠响应式依赖自动触发
只要某个字段是响应式数据(来自 data、ref 或 reactive),它被任何计算属性读取后,变更就会自动触发所有依赖它的校验重算。
- 比如用户切换「任务优先级」下拉框 → 触发关联的 estimateHoursRule 和 reviewerRule 同步更新
- 填写「前置任务 ID」→ 自动检查是否存在循环依赖,并更新当前任务的 canStartRule
- 所有逻辑无副作用:不调 API、不改 this.form、不调 this.$set










