重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
vee-validate-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill vee-validate-skilldvee-validate为 Vue.js 提供无痛的表单处理体验
版本: 4.15.1 依赖: @vue/devtools-api@^7.5.2, type-fest@^4.8.3 标签: prev: 1.0.0-beta.10, next-edge: 4.5.0-alpha.2, edge: 4.5.0-alpha.6, next: 4.5.8, alpha: 4.12.0-alpha.1, beta: 5.0.0-beta.0, latest: 4.15.1
参考: GitHub Issues — 错误、变通方案、边界情况 • GitHub Discussions — 问答、模式、示例 • Releases — 更新日志、破坏性变更、新 API
本节记录了 vee-validate v4.x 版本特定的 API 变更 — 请优先使用这些新方式,而非旧有模式。
破坏性变更: 自 v4.10.0 起,默认禁用 v-model 支持以提升性能;可通过 configure({ validateOnModelUpdate: true }) 全局启用,或为每个字段设置 syncVModel
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
新增: defineField 于 v4.9.0 引入 — 取代 defineComponentBinds 和 defineInputBinds,为 Composition API 提供更简洁的集成方式 来源
已弃用: 响应式的初始值在 v4.12.0 中已弃用;请使用非响应式对象或 getter 函数来防止意外的同步 来源
新增: useFormContext 于 v4.14.0 中暴露,用于在深层嵌套组件中访问表单状态,无需手动注入 来源
新增: setValue 于 v4.13.0 中暴露在 Field 实例和插槽属性上,用于手动更新值 来源
新增: Composition 设置器钩子(useSetFieldValue, useSetFormValues, useSetFormErrors)于 v4.11.0 添加,用于外部状态管理 来源
新增: handleBlur 自 v4.10.0 起接受 shouldValidate 参数,用于控制失焦事件触发的验证 来源
新增: syncVModel 自 v4.10.0 起接受目标模型属性名称作为字符串,以支持自定义模型 来源
新增: isValidating 状态于 v4.9.3 添加到 useForm 和表单插槽属性中,用于跟踪异步验证状态 来源
新增: move(oldIdx, newIdx) 于 v4.6.0 添加到 FieldArray 中,用于对数组字段内的项目重新排序 来源
新增: 专用的状态钩子(useIsFieldDirty, useIsFormValid, useFieldValue)于 v4.1.0 添加,用于细粒度状态访问 来源
已弃用: handleInput 在 v4.4.0 中已弃用;请使用 handleChange 同时处理 input 和 change 事件 来源
新增: label 支持于 v4.12.0 添加到 defineField 中,用于生成一致的错误消息 来源
新增: ResetFormOpts 及其 force 标志于 v4.13.0 添加到 useResetForm 中,用于在不合并的情况下清除值 来源
其他变更: defineComponentBinds 已弃用 · defineInputBinds 已弃用 · useFieldModel 已弃用 · unsetValueOnUnmount 配置已添加 · keepValuesOnUnmount 响应性改进 · useForm 的 validate 返回对象 · useResetForm 钩子已添加 · nested field meta querying 新增于 v4.12.3
优先使用 defineField() 来绑定组件和输入框 — 它返回一个 v-model 引用和一个属性对象,用于简洁且未被弃用的绑定方式 来源
const [email, emailProps] = defineField('email', { validateOnBlur: true, props: state => ({ 'aria-invalid': !!state.errors.length }) });
根据 meta.touched 条件性地显示错误 — 防止在用户与字段交互之前就显示错误消息的“激进”验证 来源
使用 toTypedSchema() 获得全面的 TypeScript 类型安全 — 它包装 Yup、Zod 或 Valibot 模式,以区分输入(UI)类型和输出(提交)类型 来源
import { toTypedSchema } from '@vee-validate/zod'; import * as z from 'zod';
const { values } = useForm({ validationSchema: toTypedSchema(z.object({ email: z.string().email() })) });
将验证模式标记为非响应式 — 将模式包装在 markRaw 中或在 ref/reactive 外部声明它们,以避免不必要的深度响应式开销 来源
对模式验证器的导入进行摇树优化 — 仅导入你需要的特定函数(例如,import { string } from 'yup')以保持包体积最小 来源
在 useField 中将响应式字段名称作为 getter 传递 — 使用函数(例如,() => props.name)以确保 vee-validate 在动态表单中跟踪名称变化 来源
为多步骤表单启用 keepValuesOnUnmount — 当组件通过 v-if 隐藏或切换标签页时,保留字段状态 来源
const { values } = useForm({ keepValuesOnUnmount: true });
在 v-for 中使用 field.key 进行稳定的迭代 — useFieldArray 提供了在数组操作中保持不变的唯一标识符,与索引不同 来源
使用 [] 转义字段名称以禁用自动嵌套 — 将名称包裹起来(例如,[user.name])以将点号视为字面字符而非对象路径 来源
使用 handleSubmit.withControlled() 过滤提交值 — 确保只有通过 useField 或 defineField 显式注册的字段才包含在有效载荷中 来源
每周安装量
64
代码仓库
GitHub 星标数
147
首次出现
2026年2月19日
安全审计
已安装于
github-copilot55
codex53
gemini-cli52
claude-code52
kimi-cli52
amp52
vee-validatePainless forms for Vue.js
Version: 4.15.1 Deps: @vue/devtools-api@^7.5.2, type-fest@^4.8.3 Tags: prev: 1.0.0-beta.10, next-edge: 4.5.0-alpha.2, edge: 4.5.0-alpha.6, next: 4.5.8, alpha: 4.12.0-alpha.1, beta: 5.0.0-beta.0, latest: 4.15.1
References: GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs
This section documents version-specific API changes for vee-validate v4.x — prioritize these over legacy patterns.
BREAKING: v-model support disabled by default in v4.10.0 for performance; enable via configure({ validateOnModelUpdate: true }) or per-field syncVModel source
NEW: defineField introduced in v4.9.0 — replaces defineComponentBinds and defineInputBinds for cleaner Composition API integration source
DEPRECATED: Reactive initial values deprecated in v4.12.0; use non-reactive objects or getters to prevent unintended sync source
NEW: useFormContext exposed in v4.14.0 for accessing form state in deeply nested components without manual injection source
NEW: setValue exposed on Field instances and slot props in v4.13.0 for manual value updates source
NEW: Composition setter hooks (useSetFieldValue, useSetFormValues, useSetFormErrors) added in v4.11.0 for external state management source
NEW: handleBlur accepts shouldValidate parameter since v4.10.0 to control validation triggers on blur events source
NEW: syncVModel accepts target model prop name as a string in v4.10.0 for custom model support source
NEW: isValidating state added to useForm and form slot props in v4.9.3 to track async validation status source
NEW: move(oldIdx, newIdx) added to FieldArray in v4.6.0 for reordering items within array fields source
NEW: Specialized state hooks (useIsFieldDirty, useIsFormValid, useFieldValue) added in v4.1.0 for granular state access source
DEPRECATED: handleInput deprecated in v4.4.0; use handleChange for both input and change events source
NEW: label support in defineField added in v4.12.0 for consistent error message generation source
NEW: ResetFormOpts with force flag added to useResetForm in v4.13.0 to clear values without merging source
Also changed: defineComponentBinds deprecated · defineInputBinds deprecated · useFieldModel deprecated · unsetValueOnUnmount config added · keepValuesOnUnmount reactivity improved · useForm validate returns object · useResetForm hook added · nested field meta querying new v4.12.3
Prefer defineField() for binding components and inputs — returns a v-model ref and a props object for clean, non-deprecated binding source
const [email, emailProps] = defineField('email', { validateOnBlur: true, props: state => ({ 'aria-invalid': !!state.errors.length }) });
Display errors conditionally using meta.touched — prevents "aggressive" validation where error messages appear before the user interacts with the field source
Use toTypedSchema() for comprehensive TypeScript safety — wraps Yup, Zod, or Valibot schemas to differentiate between input (UI) and output (submitted) types source
import { toTypedSchema } from '@vee-validate/zod'; import * as z from 'zod';
const { values } = useForm({ validationSchema: toTypedSchema(z.object({ email: z.string().email() })) });
Mark validation schemas as non-reactive — wrap schemas in or declare them outside of / to avoid unnecessary deep reactivity overhead
Weekly Installs
64
Repository
GitHub Stars
147
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
github-copilot55
codex53
gemini-cli52
claude-code52
kimi-cli52
amp52
Genkit JS 开发指南:AI 应用构建、错误排查与最佳实践
8,600 周安装
GitHub Agentic Workflows 听写指令:AI驱动工作流语音输入技术指南
GraphQL Schema Stitching & Federation Agent - Apollo Federation v2 超图组合与验证工具
GraphQL Schema Stitcher:Apollo Federation v2 模式缝合工具,统一联邦网关
GraphQL Schema Introspector - 模式自省、查询复杂度分析与API差异报告工具
GraphQL模式自省映射器:API分析、类型生成与模式差异报告
GraphQL Schema Explorer - GraphQL API 模式探索与自动化工具
markRawrefreactiveTree-shake schema validator imports — only import the specific functions you need (e.g., import { string } from 'yup') to keep bundle sizes to a minimum source
Pass reactive field names as getters in useField — use a function (e.g., () => props.name) to ensure vee-validate tracks name changes in dynamic forms source
Enable keepValuesOnUnmount for multi-step forms — preserves field state when components are hidden via v-if or tab switching source
const { values } = useForm({ keepValuesOnUnmount: true });
Use field.key for stable iteration in v-for — useFieldArray provides unique identifiers that persist through array operations, unlike indices source
Escape field names with [] to disable automatic nesting — wrap names (e.g., [user.name]) to treat dots as literal characters rather than object paths source
Filter submission values with handleSubmit.withControlled() — ensures only fields explicitly registered via useField or defineField are included in the payload source