React与Vue表单的对比差异

前言

小编在学react的时候，发现react在使用ant-design组件的from表单，有点惊奇，跟vue差别确实有点大。

1-React 与 Vue 表单处理对比指南

核心差异概述

特性	Vue	React (Ant Design Form)
数据定义	必须显式定义 `reactive`/`ref`	通过 `name` 隐式定义
数据管理	集中式响应式对象	分散式状态或表单库托管
双向绑定	`v-model` 直接绑定	受控组件或表单库自动处理
代码风格	模板驱动	JSX/函数式驱动

2-Vue 表单实现详解

2.1 基础表单结构

vue 复制代码

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="form.username" placeholder="用户名">
    <input v-model="form.password" placeholder="密码">
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import { reactive } from 'vue';

// 必须显式定义数据结构
const form = reactive({
  username: '',
  password: ''
});

const handleSubmit = () => {
  console.log(form);
};
</script>

2.2 使用 Ant Design Vue

vue 复制代码

<template>
  <a-form :model="form" @finish="handleSubmit">
    <a-form-item label="用户名" name="username">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item label="密码" name="password">
      <a-input-password v-model:value="form.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { reactive } from 'vue';

// 仍然需要显式定义
const form = reactive({
  username: '',
  password: ''
});
</script>

3-React 表单实现详解

3.1 原生受控组件

jsx 复制代码

import { useState } from 'react';

function LoginForm() {
  // 分散式状态管理
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log({ username, password });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="用户名"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="密码"
      />
      <button type="submit">提交</button>
    </form>
  );
}

3.2 使用 Ant Design Form

jsx 复制代码

import { Form, Input, Button } from 'antd';

function LoginForm() {
  const [form] = Form.useForm();

  // 不需要预先定义数据结构！
  const onFinish = (values) => {
    console.log(values); // 自动包含所有name字段
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item name="username">
        <Input placeholder="用户名" />
      </Form.Item>
      <Form.Item name="password">
        <Input.Password placeholder="密码" />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">提交</Button>
      </Form.Item>
    </Form>
  );
}

4-高级功能对比

4.1 表单验证 Vue 版本

vue 复制代码

<a-form-item 
  label="邮箱" 
  name="email"
  :rules="[
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' }
  ]"
>
  <a-input v-model:value="form.email" />
</a-form-item>

React 版本

jsx 复制代码

<Form.Item
  name="email"
  rules={[
    { required: true, message: '请输入邮箱' },
    { type: 'email', message: '邮箱格式不正确' }
  ]}
>
  <Input />
</Form.Item>

4.2 动态表单字段 Vue 版本

vue 复制代码

<template v-for="(item, index) in form.items" :key="index">
  <a-input v-model:value="item.value" />
</template>

React 版本

jsx 复制代码

{fields.map((field) => (
  <Form.Item name={['items', field.name]} key={field.id}>
    <Input />
  </Form.Item>
))}

5-为什么 React 不需要预先定义？

设计哲学差异

• Vue 的响应式系统需要明确知道哪些属性需要跟踪

• React 的状态更新是显式的（通过 setState）
Ant Design Form 的工作原理

graph TD A[Form.Item的name属性] --> B[内部维护store] B --> C[onFinish时提取对应数据]
性能考量

• Vue 的响应式系统需要初始化所有属性

• React 的虚拟 DOM 差异更新更灵活

6-学习建议

Vue 学习者

• 掌握 reactive/ref 的定义规范

• 理解 v-model 的编译原理
React 学习者

• 区分受控组件和非受控组件

• 学习主流表单库（Ant Design Form/Formik）
通用原则

• 始终确保表单数据可追溯

• 复杂表单建议使用专业库（VeeValidate/Formik）

附录：资源推荐 • Vue 官方表单文档

• Ant Design Vue Form

• React 受控组件文档

• Ant Design Form API