极客时间-大圣- 玩转Vue3全家桶（完结）

这套资料的主题很明确：以 Vue 3 为核心，把 Composition API、响应式系统、路由、状态管理、构建工具这条主线串成一条可以动手跑的链路。它不是一个只讲 API 的速查手册，也不是纯概念课，而是围绕一个可运行的清单应用展开，边写边解释「为什么这样组织代码」。对已经写过 Vue 2、但迟迟没把项目迁到 Vue 3 的开发者来说，这种结构比零散看文档更接近真实工程。

技术栈的边界在哪里

资料覆盖的是 Vue 3 全家桶的常规组合：Vue 3 本身、Vue Router 4、Pinia（或 Vuex 的替代方案）、Vite 构建工具，以及<script setup>语法糖下的组件写法。它没有把范围铺到 SSR、微前端或跨端，而是把单页应用这条线讲透。这一点对自学者反而友好——你能清楚知道学完之后能覆盖什么场景，哪些还得另找资料补。

值得留意的是它对 Vue 2 到 Vue 3 迁移的处理。资料里专门有一段讲升级路径，包括选项式 API 与组合式 API 的对应关系、响应式原理从Object.defineProperty到Proxy的变化带来的写法差异，以及生命周期钩子的改名与调整。这部分是很多教程一带而过的地方，但对要维护老项目的人恰恰最实用。

项目结构怎么组织

清单应用这个例子选得不算新鲜，但胜在能覆盖足够多的点：列表渲染、表单双向绑定、条件渲染、组件拆分、状态提升与共享、路由跳转与参数传递。你可以把它当成一个最小可用的工程骨架，对照着看每个功能模块放在哪个目录、组件之间怎么通信、状态放在哪一层。

从工程角度看，更值得关注的是它如何处理组合式函数的抽取。当逻辑从组件里抽成独立的useXxx函数时，参数怎么传、返回值怎么设计、副作用怎么清理，这些在真实项目里反复出现。资料里通过清单应用的筛选、增删改等操作演示了这套模式，比单讲ref和reactive的区别更有复用价值。

可复用的模块与写法

• 响应式数据的选型：什么时候用ref、什么时候用reactive，以及解构后丢失响应性的常见坑；
• 组合式函数的组织：把状态、计算属性、方法打包成一个可测试的单元；
• 路由与状态管理的配合：页面级状态和全局状态的分界；
• 构建配置：Vite 的入口、别名、环境变量在项目中的实际落点。

这些点单独看都不复杂，但放在一个完整项目里，它们的组合方式决定了代码后期好不好改。资料的价值在于给出了一个可运行的参照，你可以把自己的项目结构跟它对照，看差异出在哪。

怎么用它自学

建议不要按顺序只看一遍。更有效的做法是：先跑通清单应用，理解数据流；然后关掉资料，自己从零搭一个类似规模的小项目，遇到卡壳再回来查对应章节。Vue 3 的文档本身很完整，这套资料的作用是提供一条经过编排的实践路径，把文档里分散的知识点按工程顺序串起来。

如果你已经熟悉 Vue 2 的选项式写法，可以重点看迁移和组合式 API 那几段，跳过基础语法。如果你是刚接触框架，就按项目推进的节奏跟一遍，重点理解组件拆分和状态管理的边界，而不是背 API。整套资料更适合当作对照实践的参考，而不是被动看完就结束的视频。