Vee-Validate 中 Form 组件与 useForm 组合使用的注意事项

在 Vue.js 表单验证库 Vee-Validate 的使用过程中，开发者经常会遇到表单状态管理的问题。一个典型的场景是同时使用 Form 组件和 useForm 组合式 API 时出现的表单数据不更新问题。

问题本质

当开发者同时使用 Form 组件和 useForm 时，实际上创建了两个独立的表单上下文。Form 组件内部已经调用了 useForm，如果在外部再手动调用一次 useForm，就会导致两个表单状态实例相互冲突。

正确用法

Vee-Validate 提供了两种方式来管理表单状态：

1. 组件方式：直接使用 Form 组件，它会自动处理表单状态
2. 组合式API方式：使用 useForm 配合原生 form 元素

这两种方式应该根据项目需求选择其一，而不是混合使用。

解决方案示例

对于需要更灵活控制的场景，推荐使用组合式API方式：

<template>
  <form @submit="onSubmit">
    <div v-for="(field, idx) in fields" :key="field.key">
      <Field :name="`links[${idx}].url`" type="url" />
      <button type="button" @click="remove(idx)">Remove</button>
    </div>
    <button type="button" @click="push({ url: '' })">Add</button>
    <button>Submit</button>
  </form>
</template>

<script setup>
import { Field, useForm, useFieldArray } from 'vee-validate';

const { handleSubmit } = useForm({
  initialValues: {
    links: [{ id: 1, url: 'https://github.com/logaretm' }],
  },
});

const { remove, push, fields } = useFieldArray('links');
const onSubmit = handleSubmit((values) => {
  console.log(values); // 现在可以正确获取更新后的值
});
</script>

最佳实践建议

1. 对于简单表单，直接使用 Form 组件更简洁
2. 对于需要复杂逻辑控制的表单，使用 useForm 配合原生 form 元素更灵活
3. 避免在同一表单中混用两种方式
4. 使用 useFieldArray 处理动态表单字段时，确保表单上下文一致

理解 Vee-Validate 的状态管理机制可以帮助开发者避免这类问题，构建更健壮的表单验证逻辑。