Vue3 +Vite + Pinia + 实战项目

如果你已经能用 Vue2 写出增删改查页面，却对 setup、ref 和 reactive 的区别说不清楚，或者照着文档拼出一个能跑的 Vite 项目，但说不清它为什么比 webpack 快——那这门课正好卡在你的缺口上。它不打算把你从零教会写前端，而是假定你手里已经有一套 Vue2 的旧习惯，然后逐条告诉你哪些还成立、哪些得换掉。

先说清楚：哪些人不用看

完全没接触过 Vue 的人，看这门课会有点吃力。选项式 API 里的 data、computed、watch 至少得亲手写过，才能体会组合式 API 把逻辑按功能而不是按选项拆开之后，代码复用到底方便在哪。另一个不适用的情况是：只想找一份能直接抄的项目源码、不想理解为什么这么写的人。课程里的实战项目是按模块推进的，中途会反复回到状态设计上做取舍，跳过推导过程，剩下的只是一堆看着眼熟但改不动的代码。

Vue3 这一段，真正的门槛在响应式

模板语法和指令的写法，Vue2 转过来基本顺手，真正的分水岭是响应式底层换了实现。你需要搞清楚 ref 和 reactive 各自适合放什么、什么时候必须用 .value、解构之后为什么响应会丢。计算属性和侦听器在组合式写法下也有新的边界问题，比如副作用清理、侦听来源写成函数还是直接传值，写错了不会报错，但行为不对。

配套练习会围绕这些点来：把一段用选项式写的组件改写成组合式，并保证行为一致；再写一个可复用的逻辑函数，让它能在两个组件里各自维护独立状态。这两步做完，组合式 API 才算真的会用。

• 为什么改了数组某一项，视图有时候不更新
• watch 和 watchEffect 分别在什么场景下更合适
• 父子组件之间除了 props 和 emit，还有哪些通信方式、各自代价是什么

Vite 不只是启动快

很多人对 Vite 的印象停留在冷启动几秒。但真到项目里，你更常遇到的是：环境变量怎么按模式区分、静态资源放在哪、路径别名怎么配、打包产物的体积怎么分析。课程里会把这些配置项挨个落到实际项目结构上，而不是停在配置文件默认值的层面。

学完这一段，你至少应该能回答：开发时和构建时的模块处理方式差别在哪；为什么有些依赖需要单独处理；构建产物变大时，从哪几个方向去查。

Pinia 替代 Vuex，换的不只是名字

Pinia 的 API 确实比 Vuex 短，但真正的变化在于它去掉了 mutation，也没有嵌套模块那一层。这意味着原来靠模块划分状态的思路要重新想：状态该拆成几个 store，互相之间能不能引用，异步逻辑放 action 里还是单独抽出去。

实战项目会用 Pinia 承担跨页面的数据流转，比如登录态、列表缓存、筛选条件。练习会刻意制造几个容易踩的坑：在 store 外面直接改 state、把组件内部的临时状态塞进全局、异步请求失败后状态没回滚。这些坑不写一遍，光看是记不住的。

看完应该能自己回答的问题

• 拿到一个 Vue2 组件，能不能在半小时内改成组合式写法，且不改变行为
• 项目里加一个新的状态模块，能不能说清它该不该放进 Pinia
• 构建产物偏大或者首屏偏慢时，有没有一条自己的排查顺序
• 路由守卫、请求拦截、状态持久化这几件事，在你的项目里是怎么串起来的

如果这几个问题你现在答不上来，那这门课值得按顺序过一遍；如果大部分都能答，那直接跳到实战项目部分，把练习当作复习题做，比从头再听一遍划算。