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)。