这张路线适合谁
前置知识一句话说死：HTML/CSS/JavaScript 基础扎实（能独立写出带事件处理的页面、明白异步与模块），就直接上路；ES6 的解构、箭头函数、模块导入不熟的话，先补这块再来，Vue 的语法甜头全是建立在它们上的。零基础或想先搭环境的，从《Vue 3 环境搭建与工具链》开始。有 React 经验的读者有捷径，直接看下面的对照节。时长口径：每天 1-2 小时业余学习，五个阶段合计 6-9 周。
总览
| 阶段 | 目标 | 阶段产出 | 预估时长 |
|---|---|---|---|
| 一、工具链 | 跑通工程并理解 Vite 在干什么 | 一个带 HMR 的 Vite + Vue 工程 | 2-3 天 |
| 二、语法与响应式 | ref/computed/watch、组件通信全部过手 | 改造后的待办应用（三种通信方式各用一处） | 2-3 周 |
| 三、查阅能力 | 建立 API 索引，遇坑能自查 | 自己的”踩坑笔记”十条 | 并行进行 |
| 四、本地实战 | 独立完成状态设计、持久化、组件拆分 | 日常真在用的书签管理器 | 1-2 周 |
| 五、全栈方向 | 理解文件路由、SSR、服务端取数 | 一个 SSR 小站（含自写接口） | 2-3 周 |
这条路线的骨架就是本站 Vue 系列的六篇入门文加一篇实战，阶段产出全部是”做出一个小东西”，不是”看完了什么”。
阶段一：工具链（2-3 天）
学什么：Node 与包管理器的关系、create-vue 三种起步方式的差别、Vite 开发服务器与 HMR、Vue DevTools 的安装。资源就是《Vue 3 环境搭建与工具链》，照着做一遍即可，外部资源不需要。
产出与验收：本地跑起 dev server，改一个组件文本看到热更新。常见卡点：装完依赖起不来——九成是 Node 版本过低，对照文中版本要求；公司网络拉不动包，换国内镜像源。
阶段二：语法与响应式（2-3 周）
学什么：这是整个 Vue 的地基，慢就是快。四组概念按这个顺序过：
| 概念组 | 包含什么 | 为什么按这个顺序 |
|---|---|---|
| 响应式核心 | ref、reactive、computed | 一切的地基：数据变了视图为什么自动变，先有直觉再谈其他 |
| 模板语法 | v-if/v-for/v-model、事件与 class 绑定 | 会响应式之后模板指令只是一层声明语法 |
| 组件契约 | props、emits、插槽、defineModel | 数据要在组件间流动，契约先行才不会透传失控 |
| 副作用与时机 | watch、watchEffect、onMounted 等钩子 | 放最后：前两组不牢，watch 只会放大混乱 |
资源两篇：《第一个 Vue 3 应用》把最小闭环走一遍，《Vue 3 语法要点》逐个展开”为什么”。外部资源不需要——这两篇配官方文档的例子足够，加更多教程只会稀释练习时间。
产出与验收：待办应用改造——加一个子组件（练 props/emits）、加一个派生统计（练 computed）、加一个持久化（练 watch）。验收标准：能对每个 API 说出”不用它会怎样、用错会看到什么现象”。
常见卡点两个。reactive 解构后界面不更新：解构拿到的是普通值不是代理，改用 ref 或 toRefs。watch 侦听对象嵌套属性不触发：ref 包对象默认浅侦听，指名道姓传 getter 或开 deep。
阶段三：查阅能力（与阶段二并行）
学什么：不是读教程，是建立”知道去哪查”的索引。资源：《Vue 3 基础知识参考字典》，按”场景 → API → 坑”组织，遇到问题先查它再搜网。
产出与验收：自己的踩坑笔记十条，格式照字典的来（场景/用法/坑三列）。这条路线走完后，笔记的价值会超过任何教程——它是按你的错误史排序的。
阶段四：本地实战（1-2 周）
学什么：把语法变成架构决策——状态放哪（手写 composable 还是 Pinia）、怎么持久化（localStorage 的容错与版本化）、组件怎么拆。资源：《用 Vue 3 + Vite 做一个本地书签管理器》，跟着做完后必须脱离文章再做一个小变体（读书清单、订阅管理）。
产出与验收：一个自己日常真在用的本地工具。验收标准：脏数据不崩（手动写坏 localStorage 再启动）、增删改各操作后刷新数据完整、能口头讲清”为什么没用 Pinia”。
常见卡点：把所有状态塞回 App.vue 图省事——练习的价值就在抵制这个冲动，逼自己把数据源与视图分开。
阶段五：全栈方向（2-3 周）
学什么：文件路由、server/api、四种渲染模式、useFetch/useAsyncData/$fetch。资源两篇：《Nuxt 入门：Vue 的全栈框架》与《Nuxt 数据获取》。
产出与验收：一个 SSR 小站——首页静态化、列表页 SSR、自写两个 server/api 接口。验收标准：查看源代码能看到内容（不是空壳 div）、Network 面板确认 hydration 后没有重复请求。
常见卡点：拿 SPA 的心智理解 SSR，数据请求了两次——这正是数据获取篇的核心问题，对着 payload 与 key 的机制读两遍。
React / Next 背景的对照捷径
站内 React 线已经成体系：Hooks 心智模型与渲染与重渲染讲清了 React 的执行模型，Next.js 学习路线是 Vue 阶段五的镜像。带对照表上路，Vue 的学习成本可以砍半：
| React 里的概念 | Vue 3 对应物 | 关键差异 |
|---|---|---|
| useState / useReducer | ref / reactive | Vue 改值即触发，没有 setXxx；ref 在 script 里要 .value |
| useEffect | watch / watchEffect | Vue 依赖自动收集，不手写依赖数组；setup 只执行一次，没有”每次渲染重跑” |
| 自定义 Hook | 组合式函数（composable） | 同名同义，命名 useXxx 约定一致 |
| useContext | provide / inject | 机制等价，Vue 的注入是响应式的 |
| TanStack Query 的 useQuery | Nuxt 的 useFetch | 缓存策略内置 vs SSR 传递内置，见数据获取篇对照表 |
| Next.js | Nuxt | 文件路由、混合渲染思路一一对应，差异在 React/Vue 本身 |
最大的心智切换只有一条：React 组件函数每次渲染重新执行，Vue 的 setup 只跑一次。想深究为什么，正是上面两篇 React 文章讲的事——学 Vue 反过来会加深你对 React 的理解，这也是站内两条线并行写的用意。
里程碑自检
五个阶段的验收合成一张表，走完一阶段打一钩，”了解”不算数，产出才算数：
| 阶段 | 产出 | 过线标准 |
|---|---|---|
| 一 | Vite + Vue 工程 | 改代码即热更新；故意装错 Node 版本能自己定位问题 |
| 二 | 改造版待办应用 | 子组件、computed 派生、watch 持久化各用一处且能解释取舍 |
| 三 | 踩坑笔记十条 | 每条按”场景/用法/坑”三列，翻字典能在两分钟内定位 |
| 四 | 书签管理器变体 | 脱离文章独立完成；脏数据与写失败两个场景手测通过 |
| 五 | SSR 小站 | 查看源代码有内容；hydration 后无重复请求；能说清每条路由的渲染模式 |
常见问题
Q1: 要不要学 Options API
不需要专门学。Vue 3 的官方文档与生态已全面以组合式 API（Composition API）为默认，Options API 能看懂即可（老项目维护时对着文档查）。两条心智模型差异大，并行学习只会互相干扰。
Q2: Vue 2 的老教程能用吗
概念能迁移，代码别照抄。Vue 2 教程里的 new Vue、data 函数、filters 在 Vue 3 已移除或改写；判断标准：教程开口第一个词是 createApp/setup 就是 Vue 3 语境，是 new Vue 就跳过换一篇。
Q3: vue-router 和 Pinia 放在哪学
阶段五之后。单视图应用用不到路由，单数据源手写 composable 比 Pinia 更有学习价值（阶段四会亲手验证这一点）；等有多页面、多数据域的真实需求再装它们，官方文档半天就能上手——工具要在感受到痛点之后学，才知道它在替你解决什么。
避坑清单
- 不要跳过响应式直接抄组件库。组件库能让你三天”做出”界面，但改一个数据不更新的问题时，没有响应式心智只能瞎试；地基问题会在第一次真实调试时连本带利还回来。
- 不要 reactive 和 ref 混用到底也不定规矩。两者能混，但团队/自己要有默认（推荐默认 ref），否则半年后的代码一半 .value 一半不带，读起来像两个项目。
- 不要在阶段四之前装 Pinia。没用 ref 做过模块级单例，就不会真正理解 store 在解决什么；先手写再上库，Pinia 的 API 才不是咒语。
- 不要背 API。字典是查的不是背的，该记的是”有哪几类问题、每类的入口 API 是谁”；背下来的签名半年就过时，索引能力不会。
- 不要用 Nuxt 做不需要服务端的项目。内部工具、单页小应用用 Vite + Vue 更轻，框架的约定是给”服务端在场”的场景付的费，不享受服务就别付费。
学完之后
路线的收官不是终点而是分岔口。往工程深度：Nuxt 生态里的认证、部署、模块体系，以官方文档为纲。往类型深度：Vue 3 与 TypeScript 的配合（defineProps 泛型、vue-tsc）可以直接接TypeScript 学习路线，两条线在”类型化组件”处会师。往广度：移动端与本站后续的 Flutter、鸿蒙系列会把”声明式 UI”这套心智再复用一遍——学完 Vue 再看它们，你会发现赌注都下在同一个方向：状态驱动视图，开发者只描述状态。
诚实收尾：六周走完这条线不会让你”精通 Vue”，但响应式、组件契约、状态边界这三件事会成为肌肉记忆——之后任何声明式框架，你都是带着地图进去的。
版本核实（撰写时检索，2025-04）：Vue 当前稳定线 3.5.x（3.6 含 Vapor Mode 仍在实验、未发布）；Nuxt 当前稳定线 3.16.x，Nuxt 4 已官宣、预计 2025 年中发布，app/ 目录可通过 future.compatibilityVersion: 4 在 3.x 提前启用，useFetch/useAsyncData 均为官方文档确认特性；defineProps 泛型与 defineEmits 类型化声明自 Vue 3.3 稳定。具体以官方文档为准。