💚 Vue 学习路线
125 个互动教程
Vue 入门教程
从零开始学Vue：什么是Vue、能做什么、为什么学、写第一个Vue程序
Vue 指令
学习 Vue 最常用的指令：v-bind、v-if、v-for、v-on、v-model
Vue 计算属性 computed
computed 基于已有数据计算新数据，自动缓存，比 methods 更高效
Vue 表单输入 v-model
学习 v-model 实现文本框、复选框、单选框、下拉框的数据双向绑定
Vue 事件处理 v-on
用 v-on（简写 @）处理点击、键盘、表单等用户交互事件
Vue3 组合式 API
了解 Vue3 的 Composition API：setup()、ref、reactive
Vue 插槽 Slot — 组件内容分发
学习Vue插槽机制：默认插槽、具名插槽、作用域插槽
Vue 过渡动画 Transition
学习用Transition和TransitionGroup给元素添加进入/离开动画
Vue Teleport — 把内容传送到body
用Teleport将弹窗/通知渲染到指定DOM位置，解决fixed定位被父元素裁剪的问题
Vue3 Composables — 逻辑复用
学习Vue3的Composables模式，替代Vue2 Mixins的现代复用方案
Vue Provide/Inject — 跨层级传值
学习祖先组件向任意后代组件直接传值，跳过props逐层传递的麻烦
Vue 生命周期 — 组件从创建到销毁
理解Vue组件生命周期的8个钩子函数：created、mounted、updated、unmounted等
Vue nextTick — 等待DOM更新
理解Vue异步DOM更新机制，用nextTick在DOM更新后执行代码
Vue 自定义指令
学习创建自己的Vue指令：v-focus、v-color等，封装可复用的DOM操作
Vue 组件与 Props
学习 Vue 组件的基本概念，用 Props 从父组件向子组件传递数据
Vue 侦听器 watch
watch/watchEffect 响应数据变化执行副作用
Vue Router 路由
vue-router: createRouter/routes/router-link
Vue Pinia 状态管理
defineStore/state/getters/actions/组件中使用
Vue HTTP 请求
axios/fetch 封装/拦截器/请求状态管理
Vue 事件总线 mitt
Vue事件总线mitt：组件间通信、on/emit/off/all.clear()、TypeScript类型支持、与Vue 2的$on/$emit对比、事件命名规范防冲突
Vue watchEffect 与 watch 对比
Vue 3侦听器：watchEffect自动追踪依赖（立即执行）、watch惰性侦听（指定源）、flush:post/pre/sync回调时机、stopHandle停止侦听、侦听reactive对象陷阱
VueUse 组合式工具集
VueUse库：useStorage响应式持久化、useMouse/useWindowSize/useScroll浏览器API、useDark/useToggle暗黑模式、useFetch数据请求、useInfiniteScroll无限滚动
Vue SSG 静态站点生成
Vite SSG（静态站点生成）：vite-ssg插件、VitePress文档站、预渲染pre-rendering、与SSR对比（静态vs动态）、SEO优化、部署到CDN
Pinia 状态管理深入
Pinia深入：Setup Store vs Options Store、$patch批量更新、$subscribe监听变化、Pinia插件（持久化插件pinia-plugin-persistedstate）、与Vue DevTools配合调试
Vue Router 路由进阶
Vue Router 4进阶：导航守卫（beforeEach/beforeResolve/afterEach）、路由元信息meta、addRoute动态添加路由、路由过渡动画（Transition+router-view）、滚动行为scrollBehavior
Vue 国际化 i18n
Vue I18n：vue-i18n库、Locale Messages语言包、$t()翻译函数、日期/数字本地化、延迟加载语言包、与Vue Router集成实现多语言路由
Vue 3 v-model 变化
Vue 3 v-model：可绑定多个v-model:xxx、自定义修饰符modelModifiers（capitalize/trim）、组件v-model实现原理（modelValue+update:modelValue）、与Vue2区别
Vue 3 defineExpose 组件暴露
defineExpose：限制组件公开API（替代Vue2的$refs全部暴露）、配合ref访问子组件方法、组合式API中精确控制组件接口、封装组件库最佳实践
Vue 错误处理
Vue错误处理：onErrorCaptured钩子捕获子组件错误、errorHandler全局错误处理、Sentry集成vue3-sentry、错误边界Error Boundary概念（Vue无官方ErrorBoundary组件）、App异常监控
Vue 3 组件测试 Vitest
Vue 3测试：Vitest测试框架、@vue/test-utils mount挂载组件、wrapper.find/findAll查找、trigger触发事件、mock模拟、测试Pinia Store、测试异步组件
Vue 自动导入插件 unplugin
unplugin-auto-import(自动导入ref/reactive/computed/watch等API)/unplugin-vue-components(自动导入组件/Element Plus/Ant Design Vue无需手动注册)、减少样板代码
Vue render 函数与 JSX
Vue render函数：h()创建VNode（标签/属性/插槽）、与模板template对比、函数式组件Functional Components、JSX支持(@vitejs/plugin-vue-jsx)、动态渲染/递归组件场景
Vue 自定义 Ref
Vue 自定义Ref：customRef((track,trigger)=>...)、防抖ref/debounceRef实现、与普通ref区别（自定义get/set行为/可控制触发更新时机）、与shallowRef对比
Vue defineEmits 深入
Vue 3 defineEmits：声明组件事件（对象语法/数组语法）、事件验证(event=>boolean自定义验证函数)、TypeScript类型声明defineEmits<{(e:'change',id:number):void}>()
Vue App 全局配置与插件
Vue 3 App实例深入：app.config.errorHandler/warnHandler/globalProperties/performance、app.use()安装插件、插件开发（install方法/提供全局组件/指令/属性/注入）、插件链式安装
Vue 3 TypeScript 深入
Vue 3 TypeScript深入：defineProps<>/defineEmits<>类型声明、withDefaults设置Props默认值、模板中的类型推断、组件ref类型（InstanceType<typeof MyComponent>）、defineExpose暴露类型
Vue shallowRef 与 shallowReactive
shallowRef浅层响应式（只有.value变化触发更新/.value内部属性变化不触发）、shallowReactive浅层响应式对象（仅第一层属性响应）、triggerRef强制触发shallowRef更新、与ref/reactive对比性能优化
Vue EffectScope 作用域
EffectScope API（Vue 3.2+管理响应式副作用生命周期）：effectScope()创建作用域、scope.run(()=>watch/computed/watchEffect)、scope.stop()一键停止所有副作用、组件外使用Composables管理
Vue 3 SSR 服务端渲染
Vue 3 SSR深度：createSSRApp创建SSR应用、renderToString服务端渲染为HTML字符串、Hydration客户端水合(vue3-lazy-hydration/选择性水合)、@vue/server-renderer包、SSR vs SSG选择（内容实时性vs性能）、Nuxt 3 SSR流程
Vue Query 数据获取
TanStack Vue Query（原Vue Query）：useQuery获取数据、useMutation变更数据、queryKey缓存键/缓存失效invalidateQueries、staleTime vs cacheTime、乐观更新optimisticUpdate、与Pinia/Apollo对比
Vue toRef 与 toRefs
toRef/reactive对象将单个属性转换为ref（保持响应式链接/toRef(obj,'key')不丢失响应式）、toRefs将reactive对象所有属性转换为独立ref（解构后仍保持响应式/Pinia store解构的神器）、与直接ref对比
Vue DevTools 调试指南
Vue DevTools深入使用：组件树查看/编辑组件状态data/props/computed实时修改、Timeline性能追踪(组件渲染时间/事件时间线)、Pinia面板查看修改Store、Router面板路由状态、Vite插件热重载
Vue 3 事件总线 mitt 深入
mitt事件总线深入：mitt()创建、on注册/emit触发/off取消/all.clear清除所有、wildcard通配符监听'*'所有事件、TypeScript类型声明Events类型(事件名→参数类型映射)、与provide/inject对比（跨组件通信广域广播vs层级注入）
Vue 3 Template Refs 深入
Vue 3模板引用：ref属性+useTemplateRef得到DOM/组件引用(替代$refs)、ref回调函数形式(ref=(el)=>{}每次更新触发/null清理)、v-for中的ref数组/对象/函数收集、组件ref配合defineExpose暴露方法、与$refs对比(Composition API方式)
Vue watch once 模式
Vue watch一次性观察模式：watch(source,callback,{once:true})(Vue 3.4+)仅触发一次自动停止、watchEffect的once模式(vueuse/until/once)、使用场景(等待数据首次加载完成/执行一次初始化副作用)
Vue 异步组件 defineAsyncComponent
defineAsyncComponent定义异步加载组件：工厂函数返回import()返回Promise、loadingComponent/errorComponent/delay延迟显示加载/超时timeout、与Suspense配合
Vue Suspense 异步等待
掌握 Suspense 组件管理异步依赖的加载状态，提供优雅的 fallback 回退方案。
Vue keep-alive 缓存组件
使用 keep-alive 保留组件状态，避免重复渲染，提升动态切换性能。
Vue 渲染函数
深入理解渲染函数 h()，替代模板实现更灵活的组件逻辑。
Vue 异步组件
使用 defineAsyncComponent 按需加载组件，减少首屏体积，优化应用性能。
Vue 组合式函数
掌握组合式函数（Composables）模式，抽离复用逻辑，构建可维护的代码。
Vue provide/inject 依赖注入
利用 provide/inject 实现跨层级组件通信，避免 Props 逐层传递的繁琐。
Vue transition-group 列表过渡
使用 transition-group 为列表添加进入、离开和移动动画，提升用户体验。
Vue 动态组件
使用 <component :is> 实现组件动态切换，构建灵活的多视图界面。
Vue 组合式函数 (Composables)
学习使用组合式 API 封装可复用的逻辑
深入Vue3响应式代理陷阱：自定义Proxy Handler实现复杂状态拦截
不止于ref和reactive，通过自定义Proxy handler接管对象的所有操作，实现日志、权限校验、自动撤销等高级功能。
Suspense竞态条件治理：异步组件加载的终极稳定方案
当多个异步资源同时加载时如何避免结果错乱？本课程教你用AbortController与Suspense组合实现竞态安全。
直接操作VNode：在render函数中构建动态布局引擎
不依赖模板，通过h函数与VNode diff算法实现运行时动态组件生成，适合可视化搭建场景。
Provide/Inject响应式记忆体：跨层级组件的状态追溯与撤销
利用provide/inject配合历史记录栈，实现可撤销的全局状态管理，比Vuex更轻量且天然支持组件树隔离。
Vue过渡系统状态机：用有限状态机驱动复杂动画序列
抛弃简单的v-if+transition，用状态机模型控制enter/leave/移动动画的有序执行。
Ref模板引用高级模式：超越DOM操作的组件通信协议
利用模板ref实现跨层级组件方法调用、异步组件暴露接口、以及ref数组与v-for联合使用的最佳实践。
构建自定义渲染器：用Vue语法编写WebGL场景
脱离DOM，利用Vue Custom Renderer API创建基于Three.js的3D渲染器，实现声明式3D编程。
Vue错误边界+Suspense联合体：构建容错性极强的动态UI栅栏
实现React-like的错误边界组件，与Suspense协同处理异步加载异常，并支持细粒度降级。
响应式调度器：用Composition API实现可控的异步任务队列
结合reactive和watch实现任务优先级调度，比Pinia更适合密集型异步操作场景。
破译v-model自定义语法糖：构建领域特定输入组件协议
超越普通的双向绑定，通过modelValue与update:modelValue实现复合类型输入、验证石化和数值格式化。
深入渲染函数：用虚拟DOM直接构建Vue组件
在Vue中使用渲染函数替代模板，实现更灵活的组件构建。
控制副作用生命周期：EffectScope 与 dispose
掌握EffectScope API管理watch/computed的生命周期。
传送门与Tailwind：跨组件样式隔离实战
使用Teleport将组件渲染到body同时保持Tailwind样式。
无渲染组件：将逻辑与视图完全分离
通过render函数创建纯逻辑组件，不输出任何DOM。
Provide/Inject 的响应式陷阱与修复
避免注入数据失去响应性的常见误区。
Key属性的隐藏用法：强制重绘与动画控制
利用key强制销毁重建组件控制动画生命周期。
封装指令为组合式函数：v-intersect变useIntersect
将自定义指令的逻辑抽取为可复用组合式API。
全局错误边界：捕获所有组件异常并优雅降级
构建应用级错误边界组件避免白屏。
Suspense + HTTP流式加载：渐进式渲染大数据
利用Suspense和ReadableStream实现分块渲染。
Vue内存泄漏诊断：从DevTools到Performance面板
系统化检测和修复Vue应用中的内存泄漏。
优雅取消：在 Vue 组合式 API 中集成 AbortController 处理异步竞态
讲解如何利用 AbortController 在 Vue 3 setup 中自动取消过时的 API 请求，避免组件卸载时的内存泄漏和竞态条件。
超越 ref：利用模板引用直接操作 DOM 原生属性与自定义指令的深层协作
揭示 Vue 3 中 template ref 的深层用法：在自定义指令内接收 ref 对象、直接读写 DOM 元素原型属性、与动画 API 协同。
Suspense 的异步边界：如何设计可嵌套的 suspenseful 组件与错误恢复策略
深入 Vue 3 内置 <Suspense> 组件，探讨多个异步依赖的并行加载、嵌套 suspense 的 fallback 优先级，以及自定义错误边界组件实现局部恢复。
Teleport 的隐秘能力：动态多目标传送与条件渲染的时序控制
探索 Teleport 的非典型用法：根据状态切换多个目标容器、与 Transition 的联动、在模态框内传送表单元素实现无障碍聚焦管理。
响应式工厂：用 Proxy 构建不可变数据仓库与深层变更追踪
基于 Vue 3 响应式原理，手动创建自定义 reactive 工厂函数，实现自动冻结、变更日志、以及类似 Immer 的 draft 机制。
KeepAlive 的缓存手术刀：条件缓存、LRU 淘汰与路由级激活钩子
超越 include/exclude，手动实现 keep-alive 组件的 LRU 缓存策略，并利用 onActivated 做精细化数据刷新，解决无限滚动列表的缓存问题。
跨平台渲染器实战：用 Vue 自定义渲染器构建一个 Three.js 场景树
讲解 Vue 3 自定义渲染器 API，从零搭建一个渲染到 Three.js 场景的迷你框架，实现声明式的 3D 组件。
服务端渲染的流式响应与 HTTP/2 Server Push：利用 Vue SSR 的 renderToStream
演示如何使用 @vue/server-renderer 的 renderToNodeStream 实现流式 SSR，结合 HTTP/2 主动推送关键 CSS/JS，大幅提升首屏性能。
EffectScope 的微管理：隔离副作用、批量回收与跨组件缓存
深入 Vue 3 的 EffectScope API，学习如何将 watch/computed 副作用分组管理，在动态组件或微前端环境下安全释放资源。
测试异步组件：掌握 flushPromises、fake timers 与 suspense 模拟
针对 Vue 3 异步组件和 Suspense 的测试策略，使用 vitest 与 @vue/test-utils 的 flushPromises、vi.useFakeTimers 处理延迟加载与异步 setup。
深入响应式代理陷阱：自定义Proxy处理器实现细粒度依赖追踪
超越Vue3基础响应式，学习如何通过自定义Proxy处理器劫持get/set/deleteProperty等操作，实现非标准响应式行为（如计算属性的惰性求值、数组索引监听）。
多目标Teleport：动态渲染到多个DOM容器并管理生命周期
探索Teleport组件的进阶用法，不限于单一to属性，实现条件性多目标传送、传送门内组件保持父作用域时的生命周期钩子变化。
组合Suspense与错误边界：处理异步组件加载的完整状态机
结合Suspense的fallback与onErrorCaptured生命周期，构建一个支持loading、error、success三态的错误边界组件，并学习如何重置异步边界。
自定义渲染器实战：用Vue的渲染器API在Canvas上绘制游戏精灵
脱离DOM环境，使用@vue/runtime-core的createRenderer构建Canvas渲染器，实现组件树驱动Canvas绘图，并处理事件坐标系转换。
编译器宏魔法：编写自定义编译时转换修改模板语法
利用Vue的compiler-sfc插件系统，编写自定义转换器在编译阶段将特定v-指令或模板语法替换为高级功能（如v-memo自动推导依赖）。
外部状态机驱动：用XState定义复杂UI流程并与Vue响应式同步
将XState状态机与Vue的ref/reactive桥接，实现可预测的UI流程（如多步骤表单、游戏状态），并避免直接修改状态机上下文。
作用域化的Provide/Inject：实现类似React Context的消费者选择器
通过Symbol作为注入键和工厂函数，解决多层provide时命名冲突，并实现只订阅特定片段的优化模式（类似useContextSelector）。
流式SSR与Suspense：实现分块加载的渐进式页面渲染
利用Vue 3.3+的流式渲染API与Suspense结合，让服务器端异步组件在数据就绪后立即发送HTML块，提升TTFB感知速度。
Web Worker组合式函数：将CPU密集型任务隔离到线程避免卡顿
封装useWorker组合式函数，将Vue组件中的计算逻辑转移到Web Worker，利用Transferable对象优化大数据传输，并处理Worker内无法访问DOM的限制。
自定义虚拟节点类型：渲染非组件数据 (Markdown/JSON) 为VNode
扩展Vue渲染器，让虚拟节点支持自定义type（如'markdown'），并编写专属的patch逻辑直接解析并渲染为静态HTML。
Vue 自定义渲染器工厂：从零构建一个 Canvas 游戏引擎
深入 Vue 渲染器核心，通过 createRenderer API 构建非 DOM 环境的渲染引擎，掌握虚拟节点到 Canvas 图形的映射机制。
响应式枚举器：用 Proxy 实现双向关联数据同步
利用 Vue 3 响应式系统中的 Proxy 陷阱，设计一个自动维护双向引用关系的枚举器，解决多对多数据同步难题。
传送门与过渡动画的协调器：跨 DOM 层级的状态驱动动画
结合 Teleport 和 Transition 组件，设计跨 DOM 树动画编排系统，解决 Portal 元素脱离父组件动画上下文的问题。
表单模式编译器：将 JSON Schema 直接编译为 Vue 组件树
绕过运行时解释器，设计一个在构建阶段将 JSON Schema 转换为优化后的 Vue 组件代码的编译器，提升动态表单渲染性能。
Suspense 流式加载：实现基于优先级的异步分片渲染
扩展 Suspense 组件能力，实现异步依赖的优先级调度与分片渲染，让关键 UI 先展示，非关键内容渐进式加载。
指令生命周期引擎：构建可撤销的指令中间件系统
深入 Vue 自定义指令的 8 个生命周期钩子，设计支持链式调用和撤销操作的指令中间件，类似 Express 的洋葱模型。
记忆化模板编译器：自动识别并缓存纯静态子树
分析 Vue 模板编译产物，开发一个编译时插件自动检测无动态绑定的子树并生成 v-memo 指令，消除冗余更新计算。
副作用作用域组合器：跨组件边界的响应式清理策略
利用 Vue 3 的 effectScope API 设计跨组件的副作用编排系统，自动清理非父子关系的响应式副作用。
Props 验证器生成器：从 TypeScript 类型自动推导运行时验证
构建一个编译时工具，从 TypeScript 接口定义自动生成 Vue props 验证函数，消除类型定义与运行时验证的双重维护。
组合式 API 调试器：可视化追踪响应式依赖的生成与销毁
开发一个 DevTools 面板，利用 Vue 内部 reactivity 模块的追踪机制，实时展示每个 reactive 对象的依赖关系图。
深入响应式系统：从 Symbol 到 Proxy 的手写实现
本教程将带领你从零实现 Vue 3 的响应式系统核心，深入理解 Proxy、Reflect 和 Symbol 的协同工作机制。
模板 ref 与函数式 ref：跨越组件边界的精准操控
剖析 template ref 的底层实现机制，并讲解如何利用函数式 ref 模式在跨层级组件中安全、灵活地传递 DOM 引用。
编译原理初探：用 AST 改写 .vue 文件模板
不依赖 vue-loader，直接使用 @vue/compiler-sfc 解析 .vue 文件，修改 AST 节点实现模板级别的自动化转换。
Suspense 与异步 setup：构建可靠的加载状态机
深入 Suspense 组件的 three-state 模型（pending/resolve/reject），以及如何利用 <script setup> 中顶层 await 实现异步依赖注入。
自定义渲染器实战：用 Vue 渲染到 Canvas/Electron
利用 @vue/runtime-core 的 createRenderer API 构建一个自定义渲染器，将 Vue 组件渲染到 OffscreenCanvas 或 Electron 原生窗口。
Teleport + Transition 的深层协同：模态框动画的物理与逻辑解耦
将 Teleport 与 Transition 复合使用，解决模态框/通知栏中动画作用域、滚动锁定、焦点管理的复杂问题。
Vapor Mode 初体验：无虚拟 DOM 的指令编译优化
探索 Vue 即将推出的 Vapor Mode 如何跳过 Virtual DOM，直接编译指令为原生 DOM 操作，并手写一个 v-model 的 vapor 风格编译版本。
隐蔽的内存泄漏：Watcher、事件监听与全局状态的反模式
诊断 Vue 应用中难以察觉的内存泄漏，包括 watch 未取消、全局事件总线未销毁、keep-alive 缓存膨胀等高级场景。
JSX/TSX 中的泛型组件：从 Vue 3.3 到类型安全的高阶模式
利用 Vue 3.3+ 的泛型组件能力，在 JSX 中编写类型安全的 table、form 等高阶组件，实现 props 的自动推导。
测试组合函数（Composable）的正确姿势：Mock、Provide 与 Pinia 隔离
深入 @vue/test-utils 和 vitest，讲解如何独立测试包含 inject、路由、Store 的复杂组合函数。
无渲染组件模式：将业务逻辑与视图完全解耦
深入探讨Vue中无渲染组件（Renderless Components）的设计思想与实现，通过作用域插槽将数据逻辑抽象为可复用的纯函数组件。
Teleport与KeepAlive的协同作战：解决弹窗缓存与状态恢复难题
组合Teleport和KeepAlive实现跨组件树的状态保持弹窗，解决路由切换后弹窗内容丢失、滚动位置重置等棘手问题。
自建类型安全的事件总线：用Composable替代全局EventBus的10倍稳妥方案
抛弃传统的new Vue()事件总线，利用Composable + Symbol + provide/inject构建带类型推断的强类型事件系统，支持自动清理。
ref的隐藏形态：模板引用与响应式引用的量子纠缠
剖析ref()函数返回的深层结构，揭示模板ref与script中ref的完全不同的工作机理，以及如何让它们互通有无。
Mixin的掘墓人：用函数式组合式API重构遗留混入架构
系统性地将大型Mixin重构为组合式函数，解决命名冲突、隐式依赖、逻辑碎片三大顽疾，并保持向后兼容。
Suspense边界之外的错误：构建异步组件的熔断与降级机制
深入Suspense的error捕获盲区，实现多层嵌套异步组件的统一错误处理、超时熔断和优雅降级方案。
reactive的底线：当Proxy遇到不可代理对象时的降级策略
探索reactive()的底层Proxy限制，解决Date、Map、Set、WeakMap等特殊对象无法被正确响应式追踪的问题。
虚拟DOM劫持术：在渲染函数中动态修改子组件插槽内容
利用render函数和h()方法，在运行时动态插入、删除或修改子组件的插槽内容，实现高阶布局组件。
组件实例的基因改造：利用TypeScript声明合并修改全局组件类型
通过TypeScript的声明合并和模块扩充技术，为Vue组件实例添加自定义属性、方法，并保持类型安全。
自定义指令的生命周期暗流：在created到unmounted之间精确介入
挖掘自定义指令的每个生命周期钩子执行时机，掌握在指令中操作DOM、监听事件、管理副作用的精妙技巧。