外观
Vue 3 学习路线
是什么
前提：已过完三件套路线。这条 Vue 路线的核心方法：用原生 JS 重写过的小项目，再用 Vue 写一遍，体会「框架到底帮你省了什么」。
路线总览
阶段1 SFC 基础 → 阶段2 组合式 API → 阶段3 组件通信 → 阶段4 Composables → 阶段5 Router → 阶段6 Pinia阶段 1：SFC 与模板语法（约 1 周）
学：单文件组件结构、插值、指令（v-if / v-for / v-bind / v-on / v-model）、计算属性 做：重写 TodoList——对比原生版本，体会「数据驱动 vs 手动操作 DOM」 过关标准：不查文档能说出 v-if 和 v-show 的区别及选用
阶段 2：组合式 API（约 2 周）
学：ref / reactive / computed / watch / 生命周期（onMounted 等） 做：天气查询页：输入城市 → fetch 接口 → 展示卡片，含 loading 和错误态 过关标准：能解释 ref 为什么要 .value；知道 watch 和 computed 各自的适用场景
新手之坑
reactive 解构后会失去响应性。新手期统一用 ref，能躲开 90% 的响应性怪问题。
阶段 3：组件通信（约 1 周）
学：props / emit、v-model 在组件上的用法、插槽 slot、provide / inject做：把天气页拆成 SearchBar / WeatherCard / LoadingSpinner 三个组件 过关标准：给一个「子组件改父组件数据」的需求，能报出三种以上方案及取舍（对照状态管理对比）
阶段 4：Composables（约 1 周）
学：把逻辑抽成 useXxx 函数；VueUse 常用函数 做：手写 useFetch（封装 loading / error / data 三态），并用它简化天气页 过关标准：明白 composable 和普通工具函数的区别（响应式状态的生命周期绑定）
阶段 5：Vue Router（约 1 周）
学：路由表、RouterLink / router-view、动态路由参数、导航守卫、懒加载 做：给天气应用加页面：首页（城市列表）+ 详情页（/city/:id）+ 404 页 过关标准：能实现「未登录跳登录页」级别的简单守卫
阶段 6：Pinia（约 1 周）
学：defineStore、state / getter / action、DevTools 调试、持久化插件 做：给应用加「收藏城市」功能：任意页面可收藏，收藏页统一管理 过关标准：能说清这个需求为什么必须全局状态，而天气数据为什么不用（对照状态管理对比）