react和vue的区别之一

前言

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

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

1. 核心差异概述

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

2-Vue 表单实现详解

2.1 基础表单结构

<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

<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 原生受控组件

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}><inputvalue={username}onChange={(e) => setUsername(e.target.value)}placeholder="用户名"/><inputtype="password"value={password}onChange={(e) => setPassword(e.target.value)}placeholder="密码"/><button type="submit">提交</button></form>);
}

3.2 使用 Ant Design Form

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 版本

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

React 版本

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

4.2 动态表单字段
Vue 版本

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

React 版本

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

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

1. 设计哲学差异
   • Vue 的响应式系统需要明确知道哪些属性需要跟踪

   • React 的状态更新是显式的（通过 setState）

2. Ant Design Form 的工作原理

3. 性能考量
   • Vue 的响应式系统需要初始化所有属性

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

---

6-学习建议

1. Vue 学习者
   • 掌握 reactive/ref 的定义规范

   • 理解 v-model 的编译原理

2. React 学习者
   • 区分受控组件和非受控组件

   • 学习主流表单库（Ant Design Form/Formik）

3. 通用原则
   • 始终确保表单数据可追溯

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

---

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

• Ant Design Vue Form

• React 受控组件文档

• Ant Design Form API

---