1. 写法不同：
- Vue：Vue 使用模板语法，开发者在
<template>模板中编写 HTML 标签描述页面结构，并结合 Vue 的指令（如v-if、v-for）处理交互逻辑。Vue 通过编译将模板转换为渲染函数，最终通过虚拟 DOM 渲染视图。 - React：React 使用 JSX 语法，允许在 JS语句 中直接编写 HTML 标签。 JSX 在编译时被转换为
React.createElement调用，从而创建虚拟 DOM 元素，并最终通过虚拟 DOM 渲染到页面 ，开发者可以在 JSX 中插入表达式和逻辑。
2. 组件声明方式不同：
- Vue：Vue 通常通过单文件组件来声明组件。在单文件组件中，HTML 模板、js 逻辑和 CSS 样式都被组织在同一个文件中，方便组件开发和代码管理。
- React：React 通过创建函数组件或类组件来声明组件,样式通常在 React 中独立管理。类组件继承自
React.Component上的属性和方法，并且可以使用生命周期方法，而函数组件通过 Hooks 实现状态管理和类似生命周期功能；
jsx
复制代码
// 函数组件
function Example() {
const message = 'Hello from React component';
return <div className="example">{message}</div>;
}
// 或者类组件
class Example extends React.Component {
render() {
return <div className="example">Hello from React component</div>;
}
}
export default Example;
3. 响应式数据和组件状态管理：
-
Vue：
- Vue 2：在
data函数中声明响应式数据，Vue 通过Object.defineProperty实现数据劫持，自动更新视图。 - Vue 3：通过 Composition API（如
ref和reactive）声明响应式数据，基于 Proxy 实现更高效的响应式系统。Vue 支持双向数据绑定（尤其在表单控件中），使得数据与视图的同步非常方便。
- Vue 2：在
-
React：React 使用单向数据流，通过
useState、useReducer等 API 进行函数组件状态管理。React 没有内置的双向数据绑定，数据修改通常通过事件处理函数更新状态。
jsx
复制代码
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
4. 组件通信：
- Vue：在 Vue 中，子组件可以通过
$emit触发自定义事件向父组件传递数据。对于跨层级的组件通信，Vue 提供了provide和inject函数进行跨组件传参。 - React：在 React 中，子组件通过回调函数向父组件传递数据。对于跨组件传递数据，React 使用 Context API 进行跨组件传参。 在 React 中，子组件通过回调函数向父组件传递数据：
function ParentComponent() {
const handleUpdate = (value) => {
console.log('Updated value:', value);
};
return <ChildComponent onUpdate={handleUpdate} />;
}
function ChildComponent({ onUpdate }) {
const newValue = 'New Value';
return <button onClick={() =>onUpdate(newValue)}>Update</button>;
}
5. 学习门槛：
- Vue：Vue 的学习曲线相对平缓，它的模版语法和指令式系统让开发更容易上手；
- React：React 的学习曲线相对陡峭，开发者需要掌握 JSX 语法、Hooks API，以及函数式编程思想。
6. 生态系统：
- Vue 官方提供了统一的开发工具（如 Vue Router、Vuex），而 React 的生态系统更加分散，需要结合社区提供的工具（如 React Router、Redux）。
