Appearance

学习路线（从入门到进阶） ​

以下路线兼顾 基础夯实 、 实战落地 、 工程化 和 性能优化 ，适配零基础/前端入门者，按「阶段式递进」设计，Vue 和 React 核心逻辑并行讲解，方便对比学习，也可按需侧重单框架。

前置准备（1-2周）：补齐前端基础 ​

无论学 Vue 还是 React，先夯实底层，避免后续卡壳：

核心知识点 ​

  • JavaScript 核心 ：
  • HTML/CSS 进阶 ：
  • 工具基础 ：

练习目标 ​

  • 用原生 JS 实现：TODO 列表（增删改查）、异步请求数据渲染、防抖/节流函数。

第一阶段：框架入门（2-3周）：核心语法+最小应用 ​

共同目标 ​

理解「组件化思想」「响应式原理（Vue）/状态更新（React）」「虚拟 DOM」核心概念，能写简单单页组件。

学习维度Vue（优先 Vue3 + Composition API）React（优先 React 18 + Hooks）
环境搭建1. 用 1. 用
核心语法1. 模板语法（插值、指令 v-bind/v-on/v-if/v-for）；<br>2. Composition API（setup、ref、reactive、computed、watch）；<br>3. 组件定义/Props/Emits；<br>4. 生命周期（onMounted/onUnmounted 等）。1. JSX 语法（插值、条件渲染、列表渲染）；<br>2. 核心 Hooks（useState、useEffect、useMemo、useCallback）；<br>3. 组件定义/Props/事件传递；<br>4. 生命周期（useEffect 模拟）。
基础实战实现：计数器、表单校验、列表渲染（带删除/编辑）、父子组件通信。实现：计数器、表单校验、列表渲染（带删除/编辑）、父子组件通信。

关键注意点 ​

  • Vue 避免：过度依赖 Options API，直接上手 Composition API 更适配大型项目；
  • React 避免：忽略 Hooks 规则（如不能在条件语句中调用 Hooks）、滥用 useState 导致状态冗余。

第二阶段：进阶核心（3-4周）：路由+状态管理+工程化 ​

核心内容（Vue/React 对应技术栈） ​

模块Vue 技术栈React 技术栈
路由Vue Router 4：<br>1. 路由配置（动态路由、嵌套路由）；<br>2. 路由守卫（全局/组件内）；<br>3. 路由传参、懒加载。React Router 6：<br>1. 路由配置（createBrowserRouter、嵌套路由）；<br>2. 路由跳转（useNavigate）、参数获取（useParams）；<br>3. 路由懒加载、鉴权。
状态管理Pinia（替代 Vuex）：<br>1. Store 定义、State/Action/Getter；<br>2. 跨组件状态共享、持久化。Redux Toolkit（RTK，替代原生 Redux）：<br>1. Slice、Action、Reducer；<br>2. useSelector/useDispatch；<br>3. RTK Query（数据请求）、状态持久化。
工程化1. Vite 配置（别名、环境变量、打包优化）；<br>2. ESLint + Prettier 规范；<br>3. 组件封装（通用按钮/表单）。1. Vite/CRA 配置（别名、环境变量）；<br>2. ESLint + Prettier 规范；<br>3. 组件封装（通用按钮/表单）、自定义 Hooks。
数据请求Axios + 拦截器、VueUse（useFetch）、请求封装。Axios + 拦截器、React Query/SWR、自定义 Hooks 封装请求。

实战目标 ​

搭建一个「简易后台管理系统」：

  • 包含登录页、首页、列表页、详情页；
  • 实现路由鉴权、状态共享、数据请求、表单提交；
  • 封装 2-3 个通用组件（如表格、分页）。

第三阶段：深度进阶（4-6周）：高级特性+性能优化+生态 ​

核心知识点 ​

维度Vue 重点React 重点
高级特性1. 自定义指令、Teleport（传送门）、Suspense；<br>2. 组件异步加载、依赖注入（provide/inject）；<br>3. Vue3 源码核心（响应式原理、虚拟 DOM）。1. 自定义 Hooks 封装（如 useRequest、useLocalStorage）；<br>2. Suspense + lazy 异步组件、ErrorBoundary；<br>3. React 源码核心（Fiber 架构、调和过程、状态更新机制）。
性能优化1. 响应式优化（shallowRef/shallowReactive）；<br>2. 组件缓存（keep-alive）；<br>3. 虚拟列表（vue-virtual-scroller）；<br>4. 打包体积优化（Tree Shaking、CDN）。1. 渲染优化（memo、useMemo、useCallback）；<br>2. 虚拟列表（react-window）；<br>3. 打包体积优化（Code Splitting、Tree Shaking）；<br>4. 避免不必要的重渲染。
生态扩展1. UI 库：Element Plus、Naive UI、Vuetify；<br>2. 移动端：Vant；<br>3. 测试：Vitest + Vue Test Utils。1. UI 库：Ant Design、Material UI、Chakra UI；<br>2. 移动端：React Native（或 Taro/Remax）；<br>3. 测试：Jest + React Testing Library。
跨端/全栈1. Nuxt.js（Vue 服务端渲染/静态生成）；<br>2. Unocss/Tailwind CSS 集成；<br>3. Electron + Vue 桌面应用。1. Next.js（React 服务端渲染/静态生成）；<br>2. Tailwind CSS 集成；<br>3. React Native 移动端开发、Electron 桌面应用。

实战目标 ​

  • 优化第二阶段的后台管理系统（减少重渲染、提升加载速度）；
  • 基于 Nuxt.js/Next.js 搭建一个 SSR 博客系统；
  • 封装 1-2 个高复用的自定义 Hooks/指令。

第四阶段：项目实战+面试准备（持续） ​

1. 项目实战（选1-2个） ​

  • 中小型项目：博客系统、电商购物车、待办清单（侧重功能完整）；
  • 中大型项目：后台管理系统（完善权限、报表、导出功能）、社交 App 前端（React Native/Vue 移动端）；
  • 开源贡献：给 Vue/React 生态库提 PR、写自定义 Hooks/组件库。

2. 面试准备 ​

  • 核心原理：Vue 响应式（Proxy）、React Fiber/Hooks 原理、虚拟 DOM 对比；
  • 性能优化：重渲染原因、懒加载、缓存策略、打包优化；
  • 工程化：模块化、组件设计、状态管理选型、CI/CD 基础；
  • 手写题：实现 useState/useEffect、Vue 响应式、防抖节流、深拷贝。

学习建议 ​

  • 边学边练 ：每个知识点都要写代码验证，避免「只看不动手」；
  • 对比学习 ：Vue 和 React 核心思想（组件化、响应式）相通，对比差异能加深理解；
  • 优先实战 ：先做功能，再优化性能和代码规范，避免陷入「源码焦虑」；
  • 持续复盘 ：每周整理学习笔记，总结踩坑点（如 React Hooks 依赖项、Vue 响应式陷阱）；
  • 资源推荐 ：

如果时间有限，可优先聚焦「基础语法 → 路由 → 状态管理 → 实战」，后续再补进阶和优化内容；如果偏向就业，重点强化「工程化」「性能优化」和「项目经验」。