# logaretm/vee-validate `vee-validate` > Vue.js 的无痛表单 **版本：** 4.15.1（2025 年 6 月） **依赖：** @vue/devtools-api@^7.5.2，type-fest@^4.8.3 **标签：** prev：1.0.0-beta.10（2016 年 11 月），next-edge：4.5.0-alpha.2（2021 年 7 月），edge： 4.5.0-alpha.6（2021 年 8 月），下一个：4.5.8（2022 年 1 月），alpha：4.12.0-alpha.1（2023 年 11 月），beta：5.0.0-beta.0（2025 年 8 月），最新：4.15.1（2025 年 6 月） **参考文献：** [文档]() — API 参考、指南 ## API 变更本节记录了 vee-validate v4.x 的版本特定 API 更改 — 优先考虑这些更改而不是旧模式。 * 重大突破：为了提高性能，v4.10.0 中默认禁用“v-model”支持；通过 `configure({ validateOnModelUpdate: true })` 或每个字段 `syncVModel` 启用 [来源]() * 新功能：v4.9.0 中引入的 `defineField` — 替换了 `defineComponentBinds` 和 `defineInputBinds`，以实现更清晰的 Composition API 集成 [来源]() * 已弃用：v4.12.0 中已弃用反应式初始值；使用非反应性对象或 getter 来防止意外同步 [来源]() * 新功能：在 v4.14.0 中公开了 `useFormContext`，用于访问深层嵌套组件中的表单状态，无需手动注入 [来源]() * 新功能：在 v4.13.0 中，在“Field”实例和插槽属性上公开了“setValue”，用于手动值更新[来源]() * 新功能：在 v4.11.0 中添加了用于外部状态管理的组合 setter 挂钩（`useSetFieldValue`、`useSetFormValues`、`useSetFormErrors`） * 新功能：自 v4.10.0 起 `handleBlur` 接受 `shouldValidate` 参数来控制模糊事件的验证触发器 [来源]() * 新功能：`syncVModel` 在 v4.10.0 中接受目标模型 prop 名称作为字符串以支持自定义模型 [源]() * 新功能：在 v4.9.3 中将 `isValidating` 状态添加到 `useForm` 和表单槽属性中，以跟踪异步验证状态 [来源]() * 新功能：在 v4.6.0 中添加到“FieldArray”中的“move(oldIdx, newIdx)”，用于对数组字段中的项目进行重新排序[源]() * 新功能：v4.1.0 中添加了专用状态挂钩（`useIsFieldDirty`、`useIsFormValid`、`useFieldValue`），用于粒度状态访问 [来源]() * 已弃用：`handleInput` 在 v4.4.0 中已弃用；对输入和更改事件使用“handleChange”[来源]() * 新功能：v4.12.0 中添加了 `defineField` 中的 `label` 支持，以实现一致的错误消息生成 [来源]() * 新功能：在 v4.13.0 中的 `useResetForm` 中添加了 `ResetFormOpts` 和 `force` 标志，以清除值而不合并 [源]() **还更改了：** 已弃用`defineComponentBinds` 已弃用`defineInputBinds` 已弃用`useFieldModel` 已弃用`unsetValueOnUnmount` 配置`已添加`keepValuesOnUnmount` 反应性`改进了`useForm` 验证返回对象`已添加`useResetForm` 钩子·`嵌套字段元查询`新v4.12.3 ## 最佳实践 * 首选 `defineField()` 来绑定组件和输入 — 返回一个 `v-model` ref 和一个 props 对象，用于干净、未弃用的绑定 [源]() const [email, emailProps] = DefineField('email', { validateOnBlur：正确， props: state => ({ 'aria-invalid': !!state.errors.length }) }); * 使用 `meta.touched` 有条件地显示错误 - 防止在用户与字段交互之前出现错误消息的“激进”验证 * 使用“toTypedSchema()”实现全面的 TypeScript 安全性——包装 Yup、Zod 或 Valibot 模式来区分输入 (UI) 和输出（提交）类型[来源]() 从 '@vee-validate/zod' 导入 { toTypedSchema }；从 'zod' 导入 * as z； const { 值 } = useForm({ validationSchema: toTypedSchema(z.object({ email: z.string().email() })) }); * 将验证模式标记为非反应式 - 将模式包装在 `markRaw` 中或在 `ref`/`reactive` 之外声明它们，以避免不必要的深度反应性开销 [源]() * Tree-shake 模式验证器导入 - 仅导入您需要的特定函数（例如，`import { string } from 'yup'`）以将包大小保持在最小[源]() * 在 `useField` 中将反应式字段名称作为 getter 传递 - 使用函数（例如，`() => props.name`）来确保 vee-validate 跟踪动态表单中的名称更改[来源]() * 为多步骤表单启用 `keepValuesOnUnmount` - 当通过 `v-if` 或选项卡切换隐藏组件时保留字段状态 [源]() const { 值 } = useForm({ keepValuesOnUnmount: true }); * 在“v-for”中使用“field.key”进行稳定迭代——“useFieldArray”提供了在数组操作中持续存在的唯一标识符，与索引不同[源]() * 使用“[]”转义字段名称以禁用自动嵌套 - 换行名称（例如“[user.name]”）以将点视为文字字符而不是对象路径[来源]() * 使用“handleSubmit.withControlled()”过滤提交值——确保只有通过“useField”或“defineField”显式注册的字段包含在有效负载中[源]()

Vee 验证技能

包含技能