Vue → React/Next.js 思维对照表
·
| 功能/概念 | Vue | React/Next.js | 说明 |
|---|---|---|---|
| 入口文件 | main.js | index.js / app/layout.tsx | React 用 ReactDOM.createRoot 渲染，Next 有内置入口，开发者不用管。 |
| 模板语法 | {{ msg }} | {msg} | React 直接用 JS 表达式，没指令。 |
| 条件渲染 | v-if / v-else | {condition ? <A /> : <B />} | 用三元运算符或 &&。 |
| 循环渲染 | v-for="item in list" | {list.map(item => <div>{item}</div>)} | 需要 key。 |
| 事件绑定 | @click="fn" | onClick={fn} | 事件名用驼峰。 |
| 属性绑定 | :src="url" | src={url} | React 直接 {} 插值。 |
| 双向绑定 | v-model="text" | <input value={text} onChange={e => setText(e.target.value)} /> | React 没 v-model，用 state+事件。 |
| 状态管理（局部） | data() | useState | React Hooks 替代 data。 |
| 生命周期 | mounted, updated, unmounted | useEffect | React 的副作用都放在 useEffect。 |
| 父子通信 | props | props | 一样，函数式传递。 |
| 子传父 | $emit('event') | props.onSomething() | 传递回调函数给子组件。 |
| 全局状态 | Vuex / Pinia | Context API / Zustand / Redux | Next 项目常用 Zustand / Jotai / Redux。 |
| 路由 | Vue Router (routes: [{ path: '/about'}]) | Next：app/about/page.tsx | Next 用文件系统路由，不写配置。 |
| 动态路由 | /user/:id | app/user/[id]/page.tsx | 文件夹名 [id] 即动态参数。 |
| 嵌套路由 | <router-view> | layout.tsx | Next 用 layout.tsx 包裹子路由。 |
| API 请求 | axios + 生命周期 | fetch (SSR/CSR) | Next 内置 fetch，能在服务端执行。 |
| SEO 设置 | vue-meta | generateMetadata / <Head> | Next 内置 SEO 能力。 |
| 后端接口 | 需要单独 Node/Koa/Express | app/api/*/route.ts | Next 内置 API 路由，全栈一体化。 |
| 构建部署 | npm run build + Nginx 部署 | vercel deploy | Next 官方推荐 Vercel，零配置上线。 |
总结迁移思路
Vue 的 指令系统 (v-if, v-for, v-model) → React 全部变成 JS 表达式 + state。
Vue Router 的 显式配置 → Next 的 文件路由（约定大于配置）。
Vuex/Pinia 的 store → React 的 Context + Hooks，或第三方（Zustand/Redux）。
Vue 的 单纯前端框架 → Next.js 是 全栈框架（前端 + API + SSR + 部署一体化）。
更多推荐
13
0- 0
已为社区贡献6条内容
所有评论(0)