Vue Learning Path

从零到专家的渐进式 Vue 学习路径。本仓库基于「示例驱动」组织内容，覆盖 Vue 核心、生态工具链与工程实战；每一个 demo 都可以在浏览器内即时编辑运行，并在 Vue 源码与对应 RFC 层面给出延伸阅读。

本站的目标是让一名「能写 Vue」的前端工程师，成长为「理解 Vue」的资深开发者：不仅会用 API，更看得见响应式系统的内部流转、组件渲染的调度顺序，以及工程化实践中那些被掩盖的细节。

推荐学习顺序

1. 入门（concept + Vue2）：从模板语法、createApp、响应式初识开始，建立组件化心智模型。
2. 响应式（reactivity + watchers + composition）：深入 ref / reactive / computed / watch / watchEffect，理解依赖收集与调度队列。
3. 组件系统（slots + advanced）：插槽、动态组件、Teleport、异步组件、函数式组件与全局属性。
4. 进阶（theory）：从源码层面拆解 mini 响应式、Diff 算法、生命周期派发、Hydration 流程。
5. 生态与实战（vue-router + pinia + ecosystem）：官方生态工具链的真实使用方式；以及性能、工程化、踩坑专题。

站点特色

• 基于示例组织：每个 API 与概念都对应一个可运行的最小例子，避免抽象语法讲解。
• 配套 REPL：所有 demo 内嵌 @vue/repl，无需本地搭建环境即可在线修改、运行、保存。
• 源码级深度：theory 路径给出 mini 实现与 vuejs/core 关键路径对照，标注行号。
• 生态工具链覆盖：从 Vue Router、Pinia 到 Vite、SFC 按需编译与 unplugin-vue-components。
• 主流组件库模式：提炼 Element Plus / Naive UI / Ant Design Vue 等主流组件库的通用模式与对比。
• 性能与踩坑专题：在大型数据结构下 spread 响应式代理的依赖收集成本、SSR、computed 副作用等。

目标读者

• Vue 初学者：刚接触 Vue，希望从「看得懂的最小例子」入手而不是大段概念灌输。
• 准备进阶到组合式 API 的开发者：熟悉 Options API，希望系统补齐 <script setup> 与 Composition 范式。
• 想理解原理的资深开发者：能熟练使用 Vue，但希望看清响应式、调度、Diff、Hydration 的内部机制。

路径概览（点击卡片进入）

Vue Learning Path

一张图梳理 Vue 知识体系，点击节点开启你的学习之旅

Vue 学习路径

Click to view sub-topics.

概述

01.concept

Click to view sub-topics.

学习路径主页00. Basic01. Getting started02. Counter03. CreateApp04. Basic render05. Compile06. Template expression07. Html08. CreateSSRApp09. App component directive use10. Scoped css and vbind css

Advanced

Click to view sub-topics.

01. Async component02. Component teleport03. Teleport modal04. Diff05. Diff animation06. Functional component07. Global properties08. Async component with loader09. Suspense async10. Keepalive includes excludes11. Transition group list12. Attrs inherit and fallthrough13. Custom directive hook14. Teleport to body15. Render function jsx16. Vue events namespace17. Props validation underscore18. Template ref vfor order19. Emits and onchange double20. Base transition duration21. Compiler sfc macro flow22. App config handlers23. Keepalive hooks24. On activated on deactivated25. App config error handler26. V memo and directives27. V on event modifiers28. V on key mouse modifiers29. V bind modifiers30. V model modifiers31. V pre v cloak32. Transition modes33. Keepalive max lru34. Special attributes is key35. Force update and dollar children36. Transition group appear37. Get current instance38. Define custom element39. Create renderer40. Instance methods dollar41. Transition group tag and move42. Teleport and suspense edge cases43. Transition mode and js hooks44. Transition group flip deep45. Has injection context

Cases

Click to view sub-topics.

学习路径主页01. Order workflow02. Reactivity core03. Request race

Component Library

Click to view sub-topics.

学习路径主页01. Provide inject config provider02. Composable use component03. Theme system css vars04. Use form item context05. Button as06. Virtualized list07. Tree shaking style import08. Ssr component library

Composition

Click to view sub-topics.

01. Hooks02. Setup03. Setup input props04. Setup input context05. Setup return render06. Setup runtime07. Defineprops default08. Defineemits validation09. DefineModel10. DefineOptions11. DefineSlots12. Provide inject typed13. Provide inject as state14. Lifecycles deep15. UseTemplateRef16. Composable pattern17. Use id18. Use model19. Use slots attrs20. Next tick21. App run with context22. On server prefetch23. To value v3324. Use id ssr25. Use template ref v3526. Next tick promise27. On server prefetch ssr28. App run with context29. V model deep options30. Template key attribute31. Create ssr app32. Use ssr context33. Prop type and extract props34. Maybe ref and to refs35. Component custom properties36. Lifecycle basics37. On error captured38. On render tracked triggered39. Reactive props destructure

Ecosystem

Click to view sub-topics.

学习路径主页01. Vite sfc on demand02. Unplugin vue components03. Vitepress theme04. Vue i18n05. Unhead usehead06. Vueuse core07. Vitest component08. Vitest reactivity09. Cypress vue10. Playwright vue11. Eslint vue12. Unplugin auto import13. Vite ssr14. Bundle analyze15. Vueuse use storage16. Vueuse watch vs watcheffect17. Vitest mock component18. Unplugin icons resolver19. Vite bundle visualizer20. Vite ssg vs vite ssr21. Cypress component mount22. I18n pluralization and datetime23. Ssr render to string24. Vue ssr vite config25. Vue tsx and explicit types26. Volar and vue tsc27. Vue compile flags28. Element plus global types

Engineering

Click to view sub-topics.

学习路径主页01. Monorepo vue pnpm02. Eslint config typescript vue03. Vitest vue snapshot04. Git hooks husky lint05. Ci caching pnpm06. Vscode settings recommended07. Vite plugin order08. Path aliases09. Layer based architecture10. Component design patterns11. Vue component type augmentation

Performance

Click to view sub-topics.

学习路径主页01. Reactive spread projection02. Reactive overhead bench03. Computed memo vs getter04. V memo list05. Keepalive include excludes06. Bundle analyze demo07. Virtualized list perf08. Ssr vs csr09. Reactive deep vs shallow bench10. Scheduler batch11. Nexttick vs raf12. Watch effect flush options13. Reactive vs immutable14. V memo vs key15. Ssr streaming vs bundle

Pinia

Click to view sub-topics.

学习路径主页01. Basic02. Setup store03. Store state and actions04. Getters and computed05. Actions async06. Subscribe and watch07. Cross store usage08. Pinia plugin09. Options vs setup10. Pinia and vuerouter11. Testing pinia store12. Disposable store13. Hot module replacement14. Composition with rxjs15. Bench setup vs options

Pitfalls

Click to view sub-topics.

学习路径主页01. Reactivity loss02. Computed side effect03. Watch deep overfire04. Async setup and suspense05. Router async resolve06. Template ref undefined07. Provide inject default08. Pinia store cross test09. Reactive array index10. Ssr window undefined11. Ssr hydration mismatch12. Forceupdate pitfall13. Deprecated instance methods

Reactivity

Click to view sub-topics.

学习路径主页01. Reactive01. Watch02. Ref02. WatchEffect03. Computed04. Computed accessor05. Computed state06. ToRefs07. Readonly08. IsProxy09. IsRef10. ToRaw11. Reactive origin12. Reactive deep proxy13. Reactive collection14. Ref unboxing15. Computed dirty and cache16. Effect scope17. Watch vs watcheffect18. Watch source form19. Scheduler and queue20. Ontrack debug21. Reactive vs ref perf22. Ssr reactivity23. ToRaw and markraw24. Effectscope detached and parent24. Shallow ref and trigger25. Is flags25. Use id and template ref26. Use template ref27. Get current scope28. To ref deep29. Computed with effect30. Custom ref debounce async31. Markraw and shallow strict32. To ref and to value33. Reactive vs immutable pattern

Slots

Click to view sub-topics.

01. Slot default02. Slot declare03. Slot dynamic04. Slot in function render05. Slot in render multi06. Slot in render07. Slot name multi shorthand08. Slot name multi09. Slot name only10. Slotscoped11. Slotscoped destructuring12. Slotscoped in function rende13. Slotscoped in render14. Slotscoped multi15. Slot props destructuring16. Slot dynamic name17. Slot in keepalive18. No slots fallback19. Scoped slot memoize20. Slot teleport combine

Theory

Click to view sub-topics.

学习路径主页00. Reactivity01. Xxx02. Reactive mini03. Computed lazy04. Vnode create05. Diff patch keyed06. Component mount07. Lifecycle dispatch08. Inject traverse09. Scheduler priority10. Nexttick microtask11. Sfc compiler pipeline12. Template optimize13. Hydration mismatch14. Events handler cache15. Async component resolution

Vue Router

Click to view sub-topics.

学习路径主页01. History02. Dynamic route03. Nested route04. Named route05. Programmatic navigation06. Router view slot07. Global guard08. Route guard09. Before enter guard10. Fetch on navigation11. Lazy route12. Scroll behavior13. Composable use route14. Data loaders loader syntax15. Typed router routes16. Transitions and keepalive17. Hmr dev

Vue2

Click to view sub-topics.

学习路径主页01. Basic02. Composition

Watchers

Click to view sub-topics.

01. Watch02. Watch multi03. Watch ref04. Watch effect05. Watch effect bind06. Watch effect debug07. Watch effect flush08. Watch effect options09. Watch effect runtime10. Watch effect stop auto11. Watch effect stop manual12. Watch effect validate13. Watch effect async ref14. Watch effect ref15. Watch effect props16. Flush options v3517. Watch post sync effect18. On watcher cleanup

© 2025 Vue Learning Path. All rights reserved.

如何使用本路径

每个 demo 都遵循统一的目录结构（见 src/learning-path/contributor.md）：

• description.md：步骤说明与原理剖析。
• App/App.vue：可运行的最小示例，REPL 默认加载。
• _hint/App/App.vue：可选的「参考答案」，点击页面中的「显示提示」按钮切换。

阅读顺序建议：

1. 先读 description.md，理解要解决的问题。
2. 打开 REPL 自己修改代码、观察输出。
3. 比对 _hint/ 下的参考答案，反思自己的实现差异。
4. 在 Vue 官方文档与对应 RFC 中查阅延伸阅读。

最近更新

• 2026-09 重构：基于 Vue 3.5 重做 reactivity / watchers / slots / theory 等核心路径，加入 useTemplateRef、响应式 props 解构、defineModel 默认值简化、watch 默认深度监听等 3.5 新特性专题。
• 新增生态路径：vue-router / pinia / ecosystem / performance / advanced / composition 覆盖官方生态与周边工具。
• 新增主流组件库专题：在 advanced 路径下整理 Element Plus / Naive UI / Ant Design Vue 的共性模式与差异点。
• 新增工程化与踩坑专题：从 vite 配置、SFC 按需加载到大型列表响应式代理的依赖收集性能，提供可复现的对比 demo。
• 元数据升级：sidebar 由 scripts/sidebar-generator.ts 自动从目录生成，新增路径无需手改导航；提交前可运行 node scripts/verify-learning-paths.mjs 自检 demo 规范。

贡献与反馈

仓库遵守 AGENTS.md 中的内容安全规范（不出现具体公司名、产品名、内部路径、Profile JSON 等）。欢迎通过 Issue / PR 反馈 demo 问题或补充新路径，详见 src/learning-path/contributor.md。