从 React 过渡到 Vue 3:开发者的实践指南

在前端开发领域，React 和 Vue 是两个非常受欢迎的框架。如果你已经熟悉 React 的开发模式，但想要尝试 Vue 3，这篇文章将帮助你快速上手，并通过代码示例展示两者的异同。

目录

简介

1. 核心概念对比
2. 项目结构对比
3. 组件定义方式
4. 状态管理
5. 生命周期钩子
6. 事件处理
7. 条件渲染与列表渲染

总结

React 是一个由 Facebook 维护的 JavaScript 库，而 Vue 是一个渐进式 JavaScript 框架，由尤雨溪创建。Vue 3 引入了 Composition API，这使得它在语法和架构设计上更接近 React Hooks 的风格，降低了从 React 切换到 Vue 的学习成本。

核心概念对比

项目结构对比

React 项目结构

Bash
my-react-app/
├── public/
├── src/
│ ├── components/
│ ├── App.js
│ └── index.js
├── package.json

Vue 3 项目结构（使用 Vite 创建）

Bash
my-vue-app/
├── public/
├── src/
│ ├── components/
│ ├── App.vue
│ └── main.js
├── package.json

组件定义方式

React 函数组件示例

Jsx
// ReactCounter.jsx
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;

Vue 3 Composition API 组件示例

Vue
<!-- VueCounter.vue -->
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
</script>

状态管理

React 中使用 Context API

Jsx
// ThemeContext.js
import React, { createContext, useState } from 'react';
export const ThemeContext = createContext();
export function ThemeProvider({ children }) {
const [darkMode, setDarkMode] = useState(false);
return (
<ThemeContext.Provider value={{ darkMode, setDarkMode }}>
{children}
</ThemeContext.Provider>
);
}

Jsx
// 使用 Context
import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';
function ToggleTheme() {
const { darkMode, setDarkMode } = useContext(ThemeContext);
return (
<button onClick={() => setDarkMode(!darkMode)}>
{darkMode ? 'Light Mode' : 'Dark Mode'}
</button>
);
}

Vue 3 中使用 Provide / Inject

Vue
<!-- App.vue -->
<script setup>
import { provide, ref } from 'vue';
import ToggleTheme from './components/ToggleTheme.vue';
const darkMode = ref(false);
provide('theme', {
darkMode,
toggle: () => (darkMode.value = !darkMode.value),
});
</script>
<template>
<ToggleTheme />
</template>

Vue
<!-- ToggleTheme.vue -->
<script setup>
import { inject } from 'vue';
const theme = inject('theme');
</script>
<template>
<button @click="theme.toggle">
{{ theme.darkMode ? 'Light Mode' : 'Dark Mode' }}
</button>
</template>

生命周期钩子

React 中的 useEffect

Jsx
import React, { useEffect, useState } from 'react';
function LifecycleExample() {
const [data, setData] = useState(null);
useEffect(() => {
// ComponentDidMount & ComponentDidUpdate
fetchData();

return () => {
// componentWillUnmount
console.log('Cleanup');
};
}, []);
async function fetchData() {
const res = await fetch('https://api.example.com/data');
const json = await res.json();
setData(json);
}
return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

Vue 3 中的生命周期钩子

Vue
<script setup>
import { onMounted, onUpdated, onUnmounted, ref } from 'vue';
const data = ref(null);
onMounted(async () => {
const res = await fetch('https://api.example.com/data');
const json = await res.json();
data.value = json;
});
onUnmounted(() => {
console.log('Cleanup');
});
</script>
<template>
<div>{{ data ? JSON.stringify(data) : 'Loading...' }}</div>
</template>

事件处理

React 事件绑定

Jsx
function Button({ onClick }) {
return <button onClick={onClick}>Click Me</button>;
}

Vue 3 自定义事件

Vue
<!-- MyButton.vue -->
<template>
<button @click="$emit('click')">Click Me</button>
</template>
<script setup>
defineEmits(['click']);
</script>

使用组件：

Vue
<MyButton @click="handleClick" />

条件渲染与列表渲染

React 条件渲染与 map

Jsx
function List({ items }) {
return (
<ul>
{items.length > 0 ? (
items.map(item => <li key={item.id}>{item.name}</li>)
) : (
<li>No items found</li>
)}
</ul>
);
}

Vue 3 v-if 与 v-for

Vue
<template>
<ul>
<li v-if="items.length === 0">No items found</li>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script setup>
const items = [];
</script>

总结

从 React 转向 Vue 3 并不困难，尤其是当你熟悉 React Hooks 后，Vue 3 的 Composition API 提供了非常相似的开发体验。两者都支持响应式数据、组件化开发、生命周期控制和高效的状态管理。

关键点回顾：

Vue 3 的 Composition API 风格与 React Hooks 类似。

Vue 的单文件组件（SFC）结构清晰，适合大型项目。

Vue 的模板语法简化了 DOM 操作，React 更加灵活但也需要更多手动操作。

Vue 的响应式系统是自动追踪依赖的，React 依赖于 useState 和 setState。

无论你是想尝试新框架，还是团队需要多技术栈支持，Vue 3 都是一个值得考虑的选择。希望这篇文章能帮助你顺利过渡！