Vue 3 与 React 对比

框架概述

在选择前端框架之前，了解两者的基本特性和背景至关重要。

Vue 3

Vue 采用循序渐进的设计哲学，你可以从简单的交互开始，逐步扩展到完整的应用。

发布：2020年9月（Vue 3 正式版本）
特点：渐进式、易上手、响应式、官方生态齐全
学习曲线：相对平缓，新手友好
适合场景：中小型项目、快速开发、团队经验较少的情况

Vue 的成功在于它降低了前端开发的门槛，让更多人能够参与 web 开发。同时保留了足够的灵活性来满足复杂的业务需求。

React

React 由 Facebook 创建并开源，它在大型应用和复杂场景中表现出色。

发布：2013年5月（开源），现已迭代到 18.x 版本
特点：灵活、生态丰富、企业级支持、JSX 语法
学习曲线：较陡峭，需要理解函数式编程概念
适合场景：大型应用、团队有 React 经验、需要 React Native 移动端

React 的强大之处在于其成熟的生态系统和社区支持，以及可预测的声明式编程模型。

核心差异

1. 模板语法 vs JSX

这是两个框架最直观的区别。Vue 使用类似 HTML 的模板语言，而 React 使用 JavaScript 的扩展语法 JSX。

Vue 3 - 模板语法

Vue 的模板更接近原生 HTML，学习成本低：

<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">点击我</button>
    
    <!-- 条件渲染 -->
    <div v-if="isVisible">条件显示的内容</div>
    
    <!-- 列表渲染 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('Hello Vue 3')
const message = ref('欢迎来到 Vue 的世界')
const isVisible = ref(true)
const items = ref([
  { id: 1, name: '项目 A' },
  { id: 2, name: '项目 B' }
])

const handleClick = () => {
  message.value = '你点击了按钮！'
}
</script>

<style scoped>
.container {
  padding: 20px;
}
</style>

React - JSX

React 使用 JSX，是 JavaScript 和 XML 的混合体，提供了完整的 JavaScript 能力：

import { useState } from 'react'

function Component() {
  const [title] = useState('Hello React')
  const [message, setMessage] = useState('欢迎来到 React 的世界')
  const [isVisible] = useState(true)
  const items = [
    { id: 1, name: '项目 A' },
    { id: 2, name: '项目 B' }
  ]
  
  const handleClick = () => {
    setMessage('你点击了按钮！')
  }
  
  return (
    <div className="container">
      <h1>{title}</h1>
      <p>{message}</p>
      <button onClick={handleClick}>点击我</button>
      
      {/* 条件渲染 */}
      {isVisible && <div>条件显示的内容</div>}
      
      {/* 列表渲染 */}
      <ul>
        {items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  )
}

export default Component

对比分析：

Vue 模板更直观，新手友好
React JSX 更灵活，有完整的 JavaScript 表达力
Vue 指令（如 v-if、v-for）更简洁
React 使用标准的 JavaScript 逻辑，学习成本是理解 JavaScript

2. 响应式系统

响应式系统是前端框架的核心，决定了数据变化如何映射到 UI 更新。

Vue 3 - Proxy 响应式

Vue 使用 JavaScript 的 Proxy API 实现自动响应式跟踪：

import { ref, reactive, watch, computed } from 'vue'

// 单个值
const count = ref(0)

// 对象
const state = reactive({
  user: {
    name: 'Tom',
    age: 30
  },
  todos: []
})

// 自动追踪依赖
watch(() => state.user.name, (newVal, oldVal) => {
  console.log(`用户名从 ${oldVal} 改为 ${newVal}`)
})

// 计算属性 - 自动缓存
const userInfo = computed(() => `${state.user.name}, ${state.user.age} 岁`)

// 修改时自动更新
count.value++
state.user.age++

React - 显式状态管理

React 需要手动处理状态更新，这给了开发者更多的控制权：

import { useState, useEffect, useMemo } from 'react'

const [count, setCount] = useState(0)
const [user, setUser] = useState({
  name: 'Tom',
  age: 30
})

// 手动处理依赖追踪
useEffect(() => {
  console.log(`用户名已更新: ${user.name}`)
}, [user.name])

// 手动优化计算结果
const userInfo = useMemo(() => {
  return `${user.name}, ${user.age} 岁`
}, [user.name, user.age])

// 显式更新
setCount(count + 1)
setUser({ ...user, age: user.age + 1 })

设计哲学的区别：

Vue：自动追踪，开发者更新数据即可
React：显式更新，开发者需要清楚知道什么时候重新渲染

3. 组件通信

在复杂应用中，组件间的通信方式影响代码的可维护性。

Vue 3

Vue 提供了多层次的通信方案：

<!-- 父到子：Props -->
<Child :title="title" :items="items" />

<!-- 子到父：Emits -->
<script setup>
const emit = defineEmits(['update-title'])
const handleUpdate = () => {
  emit('update-title', '新标题')
}
</script>

<!-- 深层通信：Provide/Inject -->
<script setup>
import { provide } from 'vue'
provide('theme', 'dark')
</script>

<!-- 全局状态：Pinia -->
import { useStore } from '@/stores'
const store = useStore()

React

React 的通信方式相对简单但需要更多手动配置：

// Props 传递
<Child title={title} items={items} onUpdate={handleUpdate} />

// Context API 深层通信
const ThemeContext = createContext()

// 状态管理库
import { useSelector, useDispatch } from 'react-redux'
const theme = useSelector(state => state.theme)

性能对比

指标	Vue 3	React
初始渲染	⚡⚡⚡	⚡⚡
更新性能	⚡⚡⚡	⚡⚡
包大小	更小	稍大
学习曲线	平缓	陡峭

生态系统

Vue 生态

路由：Vue Router
状态管理：Pinia
构建工具：Vite
UI 框架：Element Plus、Ant Design Vue

React 生态

路由：React Router、Next.js
状态管理：Redux、Zustand、Jotai
构建工具：Vite、Create React App
UI 框架：Material-UI、Ant Design、Chakra UI

使用场景选择

在选择框架时，考虑以下因素：

选择 Vue 3

快速原型开发：Vue 的低门槛让你快速启动项目
中小型 SPA 应用：完整的官方生态支持你走得更远
团队学习新框架：平缓的学习曲线提高团队效率
需要快速迭代：Vite + Vue 3 的开发体验无与伦比
传统后端转前端：模板语法更容易理解

选择 React

大型企业级应用：成熟的模式和最佳实践
需要高度定制：JSX 的灵活性满足复杂需求
团队有 React 基础：利用现有知识和经验
需要 React Native：统一的开发体验
生态库丰富需求：市场上最多的第三方库支持
长期项目维护：最庞大的社区和支持

实际案例

Vue 3 项目

<script setup lang="ts">
import { ref, computed } from 'vue'

const todos = ref<Todo[]>([])
const activeTodos = computed(() => 
  todos.value.filter(t => !t.completed)
)

function addTodo(text: string) {
  todos.value.push({
    id: Date.now(),
    text,
    completed: false
  })
}
</script>

React 项目

import { useState, useMemo } from 'react'

function TodoList() {
  const [todos, setTodos] = useState<Todo[]>([])
  
  const activeTodos = useMemo(
    () => todos.filter(t => !t.completed),
    [todos]
  )
  
  function addTodo(text: string) {
    setTodos([...todos, {
      id: Date.now(),
      text,
      completed: false
    }])
  }
  
  return <div>{/* UI */}</div>
}

总结

两个框架都很优秀，选择取决于：

团队技能：现有经验和偏好
项目需求：规模和复杂度
生态需求：第三方库和工具
长期维护：社区活跃度和支持

最终建议

选择框架的标准应该是：

团队现状：考虑现有技能和偏好
项目规模：项目的长期规划和复杂度
生态需求：是否有特定的库或工具只在某个生态可得
长期支持：确保能获得持续的社区支持

没有绝对的"最好"框架。Vue 在易用性和开发速度上领先，React 在生态丰富度和企业级支持上领先。你的选择应该基于实际情况，而不是盲目跟风。

现实建议：如果你还没有框架经验，从 Vue 3 开始会更轻松。如果你已经掌握一个框架，学习另一个会帮助你成为更全面的前端工程师。

Vue 3 与 React 对比：选择适合你的前端框架