Vue 的上手成本低是公认的，但「上手快」和「用得好」之间隔着不少东西：响应式的边界在哪、什么时候该用 provide/inject 而不是层层传 props、Vuex 到底什么规模才值得引入、组件样式为什么加了 scoped 还是会漏。
这个专题按一个真实项目会依次遇到的顺序组织——从写第一个组件，到组织多页面应用，到最后的工程配置。
学习路径
第一步：模板语法与指令。 v-if 与 v-show 的取舍、v-for 与 key、v-model 的双向绑定本质上是语法糖。这一层是 Vue 最直观的部分。
第二步：组件与生命周期。 八个钩子分别在什么时机触发、各自适合做什么。特别要理解「创建前/后」和「挂载前/后」的区别——很多「取不到 DOM」的问题都出在把 DOM 操作写进了 created。
第三步：组件通信。 props 向下、事件向上是主干；$root/$parent/$refs 是逃生通道，能不用就不用；provide/inject 适合跨多层的配置型数据，但它不是响应式的银弹。
第四步：状态管理与路由。 Vuex 的五个核心概念、mutation 为什么必须同步；Vue Router 的导航守卫执行顺序、路由懒加载。
第五步：工程化与进阶。 Vue CLI 的环境变量与配置扩展、Scoped CSS 的实现原理与穿透写法、diff 算法。
第六步：Vue 3。 Composition API 解决的是「组件变大后逻辑被 data/methods/computed 切碎」的问题，让关联代码物理上聚在一起，还能抽成 composable 复用。
Options API 与 Composition API 怎么选
| 维度 | Options API | Composition API |
|---|---|---|
| 小组件 | 更简洁直观 | 略显啰嗦 |
| 大组件 | 逻辑被选项切碎 | 关联逻辑可聚合 |
| 逻辑复用 | mixin，有命名冲突风险 | composable，显式导入导出 |
| TypeScript | 类型推导较弱 | 类型推导完整 |
| 上手成本 | 低 | 需要理解 ref/reactive 的差异 |
结论：小组件两者都行，按团队习惯；组件超过两三百行、或者需要跨组件复用状态逻辑、或者用 TypeScript，选 Composition API。
常见误区
以为 scoped 能完全隔离样式。 scoped 通过给元素加属性选择器实现，作用范围是「当前组件模板里写出来的元素」。子组件根元素、v-html 动态插入的内容、通过 JS 追加到 body 的弹窗，都不在覆盖范围内。跨组件改样式要用深度选择器。
用 $parent 和 $children 做组件通信。 这会把组件和它的使用位置绑死，父组件结构一变就崩。它们是处理边界情况的逃生通道，不是通信手段。
小项目也上 Vuex。 几个组件之间传数据，props 加事件完全够用。Vuex 的价值在于「多个互不相邻的组件共享同一份会变的状态」，没到这个程度引入它，只是多写样板代码。
在 mutation 里写异步。 mutation 必须同步，否则 devtools 的状态追踪会错乱——它记录的是 mutation 提交那一刻的状态快照。异步逻辑放 action，action 里再提交 mutation。
v-if 和 v-for 写在同一个元素上。 Vue 2 里 v-for 优先级更高，会先循环再逐个判断，白跑一遍；Vue 3 里 v-if 优先级更高，会拿不到 v-for 的循环变量直接报错。正确做法是把 v-if 提到外层，或者先用 computed 过滤数据。
本专题全部文章
- Vue3 Composition API 用了大半年，说说我的实际感受Vue3 Composition API 实战：相比 Options API 把 data/methods/computed 拆散，组合式 API 让关联逻辑聚在一起，还能抽成 composable 复用。
- vue diff 算法Vue diff 算法详解：虚拟 DOM 比对的整体流程、双端比较策略的四种命中情形、key 在列表更新中起什么作用，以及它与 React diff 在思路上的差异。
- 组件的写法一个规范的 Vue 单文件组件长什么样：template、script、style 三部分的组织方式，选项的书写顺序、命名约定与注释规范，可作为团队组件模板直接套用。
- Vue Router 使用指南：编程式导航、导航守卫与路由跳转Vue Router 使用说明：编程式导航的各种跳转方式、动态路由与参数传递、嵌套路由、导航守卫的执行顺序，以及路由懒加载的写法。
- Vue-cli 的使用Vue CLI 使用说明：运行模式与环境变量的加载规则、vue.config.js 常用配置项、代理与打包分析，以及怎么在不 eject 的前提下改 webpack 配置。
- Vuex 使用说明：五个核心概念与模块化命名空间Vuex 使用说明：state、getters、mutations、actions、modules 五个核心概念的职责划分与写法，以及为什么 mutation 必须同步、什么规模的项目才值得引入。
- Vue 知识体系梳理：从 MVVM 到组件、指令与生命周期Vue 知识体系梳理：以思维导图形式串起模板语法、响应式原理、组件化、生命周期、路由、状态管理等模块，适合体系化复习或面试前快速过一遍全貌。
- Vue 组件边界处理：$root、$parent 与 provide/injectVue 组件边界情况处理：$root 访问根实例、$parent 与 $children 的访问方式及其风险、$refs 引用子组件，以及 provide/inject 依赖注入的适用场景与局限。
- Vue 作用域 cssVue Scoped CSS 详解：vue-loader 如何通过属性选择器实现样式隔离、深度选择器怎么穿透到子组件、以及 scoped 对动态生成内容失效的原因与规避办法。
- Vue 指令完全指南：参数、修饰符、缩写与内置指令清单Vue 指令完整说明：v-if 与 v-show 的取舍、v-for 与 key、v-bind 与 v-model 的双向绑定原理、v-on 事件修饰符，以及自定义指令的编写方式。
- Vue 生命周期钩子：八个阶段的触发时机与适用场景Vue 生命周期详解：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed 八个钩子各自的执行时机与适合做的事情。
- Vue 入门：Prop 传值、类型验证与非 Prop 特性透传Vue 入门教程：从 Prop 开始讲组件通信的基本模型，包括 prop 类型校验、单向数据流约束、非 prop 特性的透传行为，适合刚上手 Vue 组件化的开发者。
- Vue 常用语法速查：组件通信、模板语法与常见写法Vue 常用语法速查：子组件调用父组件方法的几种方式、事件与属性传递、插槽用法、动态组件与异步组件，覆盖日常开发最高频的语法点。
- Vue 常见报错排查：根元素、重复导航与 scoped 样式失效Vue 开发常见问题排查：组件模板只能有一个根元素、数据更新视图不刷新、组件通信踩坑等实际开发中高频遇到的问题，每条给出成因与解决办法。
