汤小洋-Vue 3.0 新特性全面解析

如果你现在维护的项目还在用 Vue 2 的 Options API，或者面试时被问到组合式 API、ref 和 reactive 的区别只能含糊带过，这套内容值得花时间过一遍。它不讲框架历史，也不铺垫前端大环境，直接把 Vue 3 里真正影响日常写代码的那部分新机制拆开讲清楚。

它解决的是哪类工作场景

最典型的有三种。第一种是接手或迁移一个 Vue 3 项目，看别人的代码里到处是 setup、ref、watchEffect，自己能改但说不清为什么这么写。第二种是准备前端面试，Vue 3 的响应式原理和组合式 API 几乎是必问项，光背结论容易在追问时露馅。第三种是想把老项目里那些逻辑分散、复用困难的组件重新组织，但不确定组合式 API 到底比 mixin 好在哪。这套内容针对的就是这些具体问题，而不是泛泛地介绍框架。

适合什么基础，先看哪几块

前提是你能独立写 Vue 2 的组件，知道 data、methods、生命周期钩子是怎么回事，也用过 npm 或 yarn 装依赖。如果完全没接触过 Vue，建议先补基础再来，否则 setup 函数那部分会卡住。内容安排上，前三节讲怎么创建 Vue 3 项目和整体新特性，属于热身，可以快速过。真正要慢下来的是响应式 API 那几节：reactive、ref、computed、readonly、watch、watchEffect，这几个是 Vue 3 写法的地基，彼此之间容易混淆，尤其是 ref 和 reactive 的适用边界、watch 和 watchEffect 的触发差异，建议对着代码反复改几遍。setup 函数和生命周期钩子函数放在一起看，能理解组合式 API 的组织方式。依赖注入、模板 Refs、响应式工具集属于进阶补充，第一遍可以先跳过，等前面用熟了再回来。

学完能独立做什么，资料怎么配合

学完之后，你应该能独立用组合式 API 写一个新组件，把原本塞在 data 和 methods 里的逻辑按功能拆成几个可复用的函数；能判断一个场景该用 ref 还是 reactive，该用 watch 还是 watchEffect；能读懂 Vue 3 项目里常见的 setup 写法，并在迁移老代码时知道哪些地方必须改、哪些可以保留。资料里的代码和笔记建议这样用：每看完一节先别急着看下一节，把当节的示例在自己电脑上敲一遍，然后试着改一个变量类型或换一种写法，看报错信息怎么变。笔记用来对照自己理解有没有偏差，不要当成讲义背。遇到 watch 和 watchEffect 这类容易混的点，最好自己写两个小 demo 对比触发时机，比看十遍讲解都管用。

这套内容不承诺学完就能涨薪或转岗，它更像一次针对 Vue 3 核心变化的集中补课。如果你手上正好有 Vue 3 的项目或面试计划，投入几天时间跟着敲一遍，收益是比较确定的。