主题
Vue 与 React 对比总结
面试高频考点 + 双前端项目的最佳说明书。这张对比表要能流利讲出来。
一、核心思想对比
| 维度 | Vue 3 | React 18 |
|---|---|---|
| 核心思想 | 数据驱动视图 + 响应式自动更新 | UI = f(state)，状态变化触发重渲染 |
| 更新机制 | 响应式代理，精确追踪依赖 | 组件函数重新执行（Re-render） |
| 模板方案 | <template> 模板 + 指令 | JSX，JS 与 HTML 混写 |
| 状态 | ref / reactive，自动解包 | useState，需 .value/回调更新 |
| 数据更新 | 直接改 .value 即可 | 必须不可变更新（新引用） |
| 副作用 | watch / computed / onMounted | useEffect（依赖数组） |
| 作用域样式 | <style scoped> | CSS Modules |
| 学习曲线 | 平缓，模板直观 | 需先理解"重渲染"心智模型 |
二、同一功能两种写法对照
计数器
vue
<!-- Vue -->
<script setup lang="ts">
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<p>{{ count }}</p>
<button @click="count++">+1</button>
</template>tsx
// React
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return <p>{count}<button onClick={() => setCount(count + 1)}>+1</button></p>
}列表渲染
vue
<!-- Vue -->
<ul>
<li v-for="p in products" :key="p.id">{{ p.name }}</li>
</ul>tsx
// React
<ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>条件渲染
vue
<!-- Vue -->
<p v-if="stock > 0">有货</p>
<p v-else>已售罄</p>tsx
// React
{stock > 0 ? <p>有货</p> : <p>已售罄</p>}三、生态对照
| 场景 | Vue 生态 | React 生态 |
|---|---|---|
| 脚手架 | create-vue（Vite） | create-vite |
| 路由 | Vue Router | React Router v6 |
| 状态管理 | Pinia | Zustand / Redux Toolkit |
| 组件库 | Element Plus / Naive UI | Ant Design / MUI |
| 请求 | axios / VueUse | axios / SWR / TanStack Query |
| 表单 | Element Plus Form / VeeValidate | AntD Form / React Hook Form |
四、怎么选（面试可这样回答）
- 团队背景：Vue 在国内中小企业、外包、管理后台占主流；React 在外企、大厂前端中台、国际化产品更普遍。
- 上手速度：Vue 模板直观、中文生态完善，新人上手快。
- 生态与人才：React 生态更庞大、岗位量更大（尤其高级岗位）。
- 招聘现实：两者都会 → 覆盖面最广。
求职话术
"我主力是 Vue 3，但用 React 完整做过一个商城前端，两者都理解。我总结 Vue 靠响应式自动更新、React 靠显式状态与不可变更新，都遵循'数据驱动视图'。我能够根据团队技术栈快速切换。"——这段话能拿下大部分前端岗位面试的开场。
五、本项目双端对照
| 功能 | Vue 端 | React 端 |
|---|---|---|
| 首页商品列表 | HomeView.vue + v-for | Home.tsx + map |
| 登录态 | Pinia userStore | Zustand useUserStore |
| 路由守卫 | beforeEach | <RequireAuth> |
| 请求封装 | utils/request.ts | utils/request.ts（几乎相同） |
| 组件库 | Element Plus | Ant Design |
有意思的发现：请求封装、接口定义、类型文件，两端几乎可以复制粘贴。这说明——框架差异集中在视图层，而工程化与数据层的经验是通用的。这也是全栈工程师的优势：技术栈可以换，解决问题的思路不变。