Vue 学习路线：从模板表达到运行机制

这是一条可以从头读到尾的 Vue 技能书路线。从运行第一个组件开始，逐步学习模板、组件协作、响应式、逻辑复用、状态、导航、渲染、服务端和测试。每一项直接进入对应知识手札；章节标题进入该章概览。

本书只讲 Vue 框架及其直接相关的知识点。正文中的代码用于独立实验，练习用于观察一个规则在正常、边界和失败条件下的行为；业务项目设计、完整产品开发和项目实战另设专题。

阅读起点

先具备 HTML、CSS 和 JavaScript 的表达式、函数、数组与模块基础；异步部分还需要 Promise 与 async/await。第一次学习 Vue，从第一章的运行环境开始。类型标注在环境页作最小介绍，语言基础可以回到 JavaScript 笔记和 TypeScript 路线。

主线以 Vue 3.5.42、Composition API、<script setup lang="ts"> 与 Vite 为基线。路由以 Vue Router 4 的手写 API 展开，状态管理学习 Pinia，服务端章节使用 Nuxt 4；具体安装版本与运行命令以对应环境页为准。接手 Vue 2 存量代码时，从第十章连续学习实例、组件、Vuex 3、Router 3 与工具链，再进入迁移。Options API 同时存在于 Vue 2 和 Vue 3，不能用写法判断版本。

全书顺序

现代主线分为前九章，第十章是维护与迁移分支。每章的篇目按“常用先行、原理随后、少见与维护回访”组织。首次学习沿核心顺序阅读；已有经验可以从问题对应的原理或维护入口开始。

三条阅读线

阅读线	目标	适合什么时候阅读
核心主线	会写、会读、会排查常见 Vue 代码	第一次学习或需要补齐基础
原理深潜	解释响应式、渲染、调度、编译和水合为什么这样工作	核心主线遇到机制问题时，或准备深入框架
维护与迁移	读懂 Vue 2、Vuex 3、Router 3 和旧工具链	接手存量代码、做版本迁移时

难度与频率标记

• 基础：后续章节依赖的最小知识。
• 常用：日常组件、表单、状态和路由会反复使用。
• 工程：测试、类型、错误、性能、安全和发布边界。
• 原理：理解运行机制，帮助定位复杂问题。
• 少见：低频 API 或特殊宿主条件，按需阅读。
• 维护：旧版本和迁移知识，不插入现代主线。

第一章｜模板与单文件组件

核心｜基础、常用。从运行第一个组件开始，学习插值、属性、事件、表单、条件与列表，再认识模板引用、插槽和单文件组件。先看清状态如何显示、输入如何改变状态，再进入组件之间的协作。

1. 学习环境
2. 插值与表达式
3. 属性绑定
4. 事件绑定
5. 表单与 v-model
6. 条件渲染
7. 列表渲染与 key
8. 内置指令工具箱
9. 模板引用
10. 插槽初识
11. 单文件组件与样式
12. script setup 与编译宏
13. Vue 2 组件维护（维护回访）
14. Vue 2/3 模板契约（维护回访）

第二章｜组件模型与通信

核心 → 少见｜常用、工程。从组件注册建立实例的概念，用 props 与事件说明输入和修改请求，再区分属性透传、插槽、组件模型、依赖注入与实例暴露。最后观察动态、异步和递归组件如何沿用这些边界。

1. 组件注册与解析
2. Props 输入契约
3. Emits 输出事件
4. 属性透传
5. 事件监听器与属性继承
6. 插槽协议
7. 组件 v-model
8. provide / inject 依赖注入
9. 组件实例暴露
10. 动态组件、缓存与异步组件
11. 递归组件

第三章｜响应式系统

核心 → 原理｜常用、原理、少见。先区分 ref 与 reactive 保存和追踪的对象，再用依赖收集与代理操作解释更新。随后分开处理派生值、侦听副作用和调度时机，继续学习解构、作用域、集合及调试。

1. ref 与 reactive
2. track / trigger
3. Proxy 与 Reflect
4. computed
5. 侦听器
6. 调度器与 flush
7. 响应式解构
8. effectScope
9. 数组、Map 与 Set
10. Vue 2 响应式（维护回访）
11. 调试响应式

第四章｜Composition API 与逻辑复用

核心 → 工程｜常用、工程、原理。把已经学过的状态与副作用组织成有明确输入、返回值和清理责任的组合式函数。从 setup 的实例归属出发，依次讨论生命周期、模板引用、外部资源与不同运行环境。

1. setup 的执行模型
2. <script setup>
3. 组合式函数
4. 生命周期
5. Options API 与 Composition API 迁移（维护回访）
6. 模板引用与组合式函数
7. 组合式函数的资源清理
8. 组合式函数的可测试性
9. SSR 下的组合式函数
10. Vue 3.5

第五章｜状态管理与数据流

核心 → 工程｜常用、工程、维护。从局部状态开始判断数据由谁持有，再学习 Pinia 的状态、派生值与动作。围绕跨 store 协作、持久化和远程数据，逐步确定写入入口、失效条件与恢复方式。

1. 局部状态优先
2. Pinia 的核心模型
3. Vuex 存量代码（维护回访）
4. 状态修改、patch 与订阅
5. 跨 store 协作
6. 持久化与恢复
7. 服务端状态与缓存失效
8. 权限与敏感状态
9. 状态调试

第六章｜路由与导航

核心 → 工程｜常用、工程、维护。把 URL、路由记录、页面出口和浏览器历史联系起来。理解匹配与导航之后，再学习参数、布局、守卫、元信息，以及加载失败和滚动位置的恢复。

1. 路由表与匹配
2. RouterView 与 RouterLink
3. 编程式导航与失败结果
4. params、query、hash 与组件复用
5. 嵌套路由与布局
6. 命名路由与命名视图
7. 导航守卫
8. Vue Router 3 → 4 迁移（维护回访）
9. 路由元信息
10. 懒加载与错误处理
11. 滚动行为

第七章｜渲染、编译与性能

原理 → 工程｜原理、工程、少见。从虚拟节点与节点身份解释更新工作，再看编译器提示、批处理、缓存和虚拟窗口如何减少成本。每次讨论性能，都同时检查交互行为和状态是否仍然正确。

1. 虚拟 DOM 与渲染器
2. Diff 与 key
3. 编译器优化
4. 更新批处理
5. v-once 与 v-memo
6. KeepAlive
7. 异步组件与 Suspense
8. 大列表与高频更新
9. 水合与 SSR 性能
10. 性能诊断

第八章｜SSR 与 Nuxt

工程 → 少见｜工程、原理、少见。从 HTML 在哪里生成开始，区分服务端输出、状态传递和客户端水合。继续观察请求隔离、流式失败、元信息与敏感数据边界，再学习 Nuxt 中的延迟水合。

1. CSR、SSR 与 SSG
2. 水合
3. 服务端数据与客户端状态
4. 异步组件与流式输出
5. SEO 与元信息
6. 安全边界
7. Nuxt 4 与延迟水合

第九章｜测试、工具与工程实践

工程｜常用、工程。先建立测试环境并运行第一条断言，再学习组件、组合式函数和浏览器测试。将行为验证与类型检查、开发工具、组件库边界和发布观测联系起来。

1. 把第一个组件测试跑起来
2. 组件测试
3. 组合式函数测试
4. 端到端测试
5. 类型与静态检查
6. 开发工具与构建链
7. Vue 2 工具链维护（维护回访）
8. 组件库与设计系统
9. 目录与依赖边界
10. 发布与监控

第十章｜Vue 2 的连续维护与迁移

维护｜维护、少见。先在 Vue 2 原版本中读懂并修改实例、组件和页面协作，再比较 2.6/2.7 与 Vue 3。接手 Vue 2 存量代码时可以从本章开始，迁移篇再补齐对应现代知识。

1. 实例与 Options API
2. 响应式限制与异步观察
3. 组件通信契约
4. 生命周期与复用
5. Vuex 3 维护
6. Router 3 维护
7. 2.6、2.7 与工具链
8. 维护之后迁移

深入阅读

深入阅读用于在核心主线之外追踪一个问题的因果链，不改变首次学习的顺序。每条链都从可观察行为开始，再进入机制、边界和验证方法。

从一次读取追到一次页面更新

“值变了，为什么界面没有变化？”先沿着容器与代理身份与依赖追踪找到实际被读取的对象，再用Proxy 与 Reflect理解属性访问如何被拦截。遇到解构或集合时，分别检查响应式解构与数组与集合，确认读取入口是否仍能建立依赖。

知道谁依赖谁之后，继续比较派生状态与侦听器，最后用调度时机区分状态变化、任务入队和 DOM 更新。调试时可以沿响应式调试中的观察过程逐步缩小范围。

把组件之间的数据和能力分开

一个包装组件为什么丢失了监听器，父组件又为什么不能直接操作子组件内部状态？从输入契约与输出事件理解数据归属，再通过属性透传、监听器继承与插槽协议追踪属性、事件和内容各自落在哪里。跨层共享读依赖注入，命令式调用读实例暴露，两者解决的问题不同。

如果问题已经超出单个组件，继续读组合式函数与局部状态：复用一段逻辑会不会创建独立状态，哪份数据才需要共享。随后用跨 store 协作、持久化与服务端状态讨论跨模块协作、快照恢复和远程事实的失效。

跟踪副作用何时失效、由谁结束

组件已经切换，旧请求为什么还在写数据？把侦听器中的每轮清理、作用域的一组副作用、资源清理的外部资源责任连起来，再看KeepAlive中停用与卸载的区别。取消一个操作与阻止迟到结果写入需要分别检查。

同样的问题也发生在导航中。沿着导航守卫、懒加载失败与滚动行为观察守卫决策、加载失败和位置恢复；能否进入目标页面、页面是否完成更新、用户是否回到原位置，分别有自己的完成条件。

解释减少更新所需的条件

节点能否复用从Diff 与 key开始理解，再读编译优化和子树缓存，看哪些工作可以跳过以及跳过的前提。遇到异步组件或大列表时，还要考虑加载、缓存和窗口范围。最后通过性能诊断把变化放回相同数据与设备条件下测量。

让服务端输出和客户端交互接起来

从CSR、SSR 与 SSG区分 HTML 的生成位置，再用水合比较两端的结构与状态。服务端与客户端状态讨论请求之间为什么必须隔离，流式输出说明已经开始输出后发生失败如何处理。

接着读安全边界与SEO 与元信息，判断哪些信息可以进入页面、哪些必须留在服务端；最后通过延迟水合观察组件何时恢复交互，以及触发事件、焦点与水合时机怎样配合。

用不同层次的证据验证解释

先完成测试环境，再把前面标记的自动化回访题带入组件测试与组合式函数测试。需要真实浏览器行为时继续读端到端测试，涉及公开类型时读类型检查。依赖边界与发布观测将范围扩展到模块依赖和发布后的故障定位；它们沿用前面建立的行为解释。

在原版本修好，再决定怎样迁移

旧组件里的 this、data 和 watch 怎样协作，从实例与选项连续读到组件契约与生命周期。共享状态和导航问题继续到 Vuex 3 与 Router 3。能在原版本验证普通修改与失败路径后，再看版本配套和迁移合同，把运行时变化与代码组织变化分开。

迁移与专题回访

以下旧 URL 保留在对应章节，聚焦模板、机制和迁移差异。Vue 2 基础按第十章连续学习后，再由这里按问题深入比较。它们属于维护分支，不改变 Vue 3 核心主线。

• 第一章模板与组件文件之后：Vue 2 组件维护。
• 第一章模板与组件文件之后：Vue 2/3 模板契约。
• 第三章代理、侦听器和集合之后：Vue 2 响应式。
• 第四章 setup、组合式函数和生命周期之后：Options API 与 Composition API 迁移。
• 第五章局部状态与 Pinia 核心之后：Vuex 存量代码。
• 第六章路由匹配与导航守卫之后：Vue Router 3 → 4 迁移。
• 第九章类型检查与开发工具之后：Vue 2 工具链维护。