STAGE
基础建立
开篇：用正确的方式学习 Vue
Vue 很容易给人一种“学得挺顺”的错觉。模板看着像 HTML，事件绑定和条件渲染也比较直观，跑个页面往往很快就能看到效果。可真正把 Vue 用到项目里以后，问题会马上从“会不会写页面”变成“组件边界怎么划、状态放哪里、接口和权限怎么接、旧项目和新项目该怎样判断”。所以，系统学习
工欲善其事：Node、包管理器、Vue CLI、Vite 与开发环境准备
很多人第一次接触 Vue 时，会把重点都放在组件和模板上，觉得环境准备无非就是“装一下 Node、跑个 `npm install`”。可一旦开始长期维护项目，你会发现开发环境本身就是稳定性的第一道门槛。版本不统一、包管理器混用、脚手架选型混乱、构建工具理解不到位，都会在后面不断放
Vue 的核心心智：声明式 UI、组件化与响应式数据流
很多人学 Vue 时，一开始会把注意力都放在语法表面，比如 `v-if`、`v-for`、事件绑定、双向绑定这些写法怎么记。可 Vue 真正的核心并不在这些零散指令上，而在三件更底层的事情：
模板基础：指令、事件、条件渲染、列表渲染与 key
模板通常是很多人进入 Vue 的第一站，因为它看起来最像“立刻能写页面”的部分。但模板并不只是语法层，它实际上是 Vue 把状态和视图连接起来的第一层表达系统。你在模板里怎么写条件、循环、事件和绑定，直接决定了页面是否清晰、是否稳定、是否容易维护。
组件通信：props、emit、slot、provide inject 与单向数据流
Vue 项目一旦从单页面走向组件协作，通信问题就会立刻成为主线。很多页面并不是不会写，而是父子组件、表单组件、弹窗组件、列表组件之间的数据和意图传来传去之后，边界开始模糊，最后谁都能改状态、谁都能触发流程。
生命周期与副作用：created、mounted、watch、watchEffect 与清理时机
很多 Vue 页面之所以越来越难维护，不是因为模板复杂，而是因为副作用散得到处都是。请求在某个钩子里发，事件监听在另一个地方绑，定时器忘了清，`watch` 又到处响应，最后页面能跑，但没人说得清哪些逻辑什么时候发生、依赖谁、页面离开后会不会留下脏状态。
STAGE
响应式与组合式
Vue2 响应式原理：Object.defineProperty、依赖收集与更新限制
Vue2 响应式原理之所以值得认真学，不是因为今天新项目还会大量用 Vue2，而是因为很多真实业务仍然建立在它之上。更重要的是，只有理解 Vue2 为什么会有那些经典坑，你才真正能看懂 Vue3 为什么要换一套响应式底层。
Vue3 响应式原理：Proxy、ref、reactive、computed 与 effect 机制
如果说 Vue2 的响应式原理是理解存量项目和历史限制的关键，那么 Vue3 的响应式原理，就是理解现代 Vue 项目写法和组合式 API 体验的核心。很多人会感觉 Vue3 用起来“更自然”，并不是因为只是 API 换了名字，而是因为它在底层追踪模型上做了很大调整。
Options API 与 Composition API：两种组织方式怎么选
Vue 讨论里最容易被简化成“新旧之争”的主题之一，就是 Options API 和 Composition API。很多人会直接把它理解成“Vue2 写法”和“Vue3 写法”的对立，好像答案永远是新的更好。真实项目远没有这么简单。
Vue2 到 Vue3：差异点、迁移路径与兼容策略
很多团队面对 Vue2 到 Vue3 的问题时，最容易出现两种极端：一种是把它看成“语法升级，改一改就好了”；另一种是觉得“存量项目太复杂，永远别动”。这两种判断都不够成熟。因为迁移从来不是单纯的语法题，它同时涉及响应式底层、组件写法、生态兼容、工程体系和团队成本。
路由系统：Vue Router、嵌套路由、守卫与页面组织
Vue 项目一旦从几个局部组件走向真正可导航的应用，路由就不再只是“页面地址切换工具”，而会成为页面组织、权限控制、状态恢复和模块边界的重要基础设施。很多项目后期变乱，不是因为页面太多，而是因为路由设计从一开始就没有被当成系统结构来对待。
状态管理：Vuex、Pinia、局部状态与跨组件协作
Vue 项目状态之所以容易失控，很多时候不是因为“没选对库”，而是因为项目里根本没有先区分状态边界。局部弹窗状态、接口结果、登录态、筛选条件、缓存数据、跨页面共享信息，这些状态的生命周期和共享范围完全不同，如果一上来就都塞进全局 store，系统一定会越来越重。
STAGE
工程化与业务场景
异步数据与表单处理：请求、校验、联动与加载错误空状态
很多 Vue 页面真正开始变复杂，往往就是从“要接接口”和“要做表单”开始的。因为这两类场景会把状态、副作用、校验、联动、交互反馈、错误处理全都拧在一起。很多项目的问题也就出在这里：请求能发、表单能提，但加载态、错误态、空态、联动约束和提交流程没有形成稳定模式。
工程化与样式体系：单文件组件、构建流程、Scoped CSS 与主题管理
Vue 项目在小规模时，看起来很容易靠“组件 + 样式 + 请求”直接推进。但只要页面数量一多、协作人数一多，真正决定项目稳定性的往往就不再是某个组件写法，而是工程化和样式体系有没有形成统一规则。
后台系统高频场景：表格、表单、弹窗、权限与菜单设计
Vue 在真实业务里最常见的落地场景之一，就是中后台系统。这里的难点并不在“Vue 能不能做”，而在于这些页面高度重复又高度容易失控。因为中后台高频元素几乎总是这些：
测试与质量保障：单元测试、组件测试、E2E 与稳定性治理
很多 Vue 项目一开始会觉得测试是“以后再补”的东西，尤其页面能看见、交互能点，团队很容易把精力都放在功能推进上。可一旦页面数量多起来、权限逻辑变复杂、表单联动变多、状态管理开始跨模块协作，没有质量护栏的成本会迅速放大。
性能优化：渲染更新、KeepAlive、虚拟列表、懒加载与缓存
Vue 页面性能问题，很多时候不是一开始就肉眼可见，而是在页面变多、数据量变大、组件层级变深、交互变频繁之后才逐步暴露出来。最常见的误区，是把性能优化理解成“上线前再调一下”。实际上，很多性能问题在结构设计阶段就已经埋下了。
SSR 与生态协作：Nuxt、组件库、图表、上传与国际化接入
Vue 真正走到项目后半段时，难点往往不再是单个页面，而是生态协作。也就是：当你要接 SSR、接组件库、接图表、接上传、接国际化时，系统还能不能保持边界清楚、结构稳定。很多项目之所以后期变得越来越重，根本原因不是生态太多，而是这些能力接入时没有形成统一协作方式。
基于 Vue3 + Pinia 的后台项目：模块拆分、状态协作与接口落地
讲到这一篇，Vue 专题已经把模板、通信、响应式、路由、状态、工程化和中后台高频场景都串了一遍。真正要让这些东西落地，最好的方式就是把它们放回一个完整后台项目里看。因为只有进入真实项目，你才会发现“会写页面”和“能把系统组织稳”之间差的到底是什么。
漫谈与收束：面试中的 Vue（包含 Vue2 ／ Vue3），以及如何继续深入
走到这一篇，真正值得回头看的已经不是某条指令细节，而是你有没有把 Vue 学成一条完整主线。也就是：
STAGE
进阶与生态协作
Vue 状态分层：局部状态、全局状态、服务端状态与 URL 状态
状态管理真正的难点，从来不是库怎么写，而是状态边界怎么划。这一篇之所以值得单独拿出来深拆，就是因为很多 Vue 项目不是没有状态库，而是根本没先做状态分层。结果就是：局部弹窗状态、搜索条件、接口缓存、登录态、路由参数全都混在一起，后面无论用 Vuex 还是 Pinia 都会越来越
Vuex 与 Pinia 实战：模块设计、插件能力与迁移判断
如果说上一篇重点在于“哪些状态值得进全局层”，那么这一篇要回答的就是：一旦确定需要全局状态，Vuex 和 Pinia 在真实项目里到底该怎样理解，模块设计怎样做更稳，插件能力值不值得上，迁移判断又该怎样看。
Vue 表单系统专题：校验、联动、动态表单与提交流程设计
表单是 Vue 业务项目里最容易被低估的复杂区。看起来它不过是一些输入框、下拉框和按钮，但真正进入后台、配置系统、业务审核页以后，表单很快会同时拉入：
Vue 工程化拆解：Vite、SFC、环境变量与样式令牌治理
前面的工程化篇已经把整体方向带了一遍，这一篇继续往深拆开看：为什么 Vue 工程真正进入团队协作后，Vite、单文件组件、环境变量、样式令牌这些看似分散的主题，实际上会共同决定项目能不能长期稳定演进。
Nuxt 与 SSR 深入：数据获取、激活一致性、SEO 与部署心智
讲到 Nuxt 和 SSR，最容易出现的误判就是把它理解成“让 Vue 页面首屏更快一点”的增强方案。真实情况远比这复杂。只要进入 SSR，你面对的就不再只是浏览器端应用，而是一套同时涉及服务端渲染、客户端接管、数据获取、缓存策略、SEO 和部署模型的系统。
Vue 生态接入实战：组件库、图表、上传与国际化封装边界
当 Vue 项目进入中后期，技术难点往往不再是“能不能实现功能”，而是生态能力接进来以后，系统还能不能保持清晰边界。组件库、图表、上传、国际化，这几类能力几乎都会在业务项目里高频出现，而它们最容易把项目拉向两种极端：