基础入门.

Vue 3的.vue文件浏览器不认识，必须经过@vue/compiler-sfc编译成标准JavaScript和CSS。本文详解SFC的编译过程、编译后的输出长啥样、style标签在开发和生产环境的不同处理、以及Vite和Vue CLI两种 …

Vue 3的单文件组件（SFC）是.vue文件格式，把模板、逻辑、样式封装在一个文件里。本文从SFC的基本概念讲起，搞清楚template、script、style三个块怎么写、选项式和组合式两种写法有啥区别、SFC的9大优点、以及什么场景 …

Vue 3.3+支持嵌套Suspense，但嵌套异步组件切换时会出现空节点问题。本文详解嵌套Suspense的边界问题、suspensible属性的作用、为什么不设置suspensible会出现空节点和多次修补周期，以及正确的嵌套写法。

Vue 3 Suspense自身不处理错误，需要用errorCaptured选项或onErrorCaptured钩子在父组件捕获异步错误。本文详解错误捕获机制、Suspense与Transition、KeepAlive、RouterView …

Vue 3 Suspense用#default和#fallback两个插槽管理加载状态，还有pending、resolve、fallback三个事件。本文详解挂起和完成状态的切换、timeout属性怎么控制回退时机、三个事件的触发时机和实战 …

Vue 3 TransitionGroup支持通过JavaScript钩子和data属性实现渐进延迟动画，让列表项一个接一个地入场。本文详解data-index的用法、:css=“false"配合JS钩子、GSAP实现 …

Vue 3 TransitionGroup的移动动画是列表动画的灵魂。本文详解为什么删除列表项时周围元素会"跳跃"、FLIP动画原理、move类名的用法、position absolute的关键作用、moveClass自 …

Vue 3的TransitionGroup是专门给v-for列表添加动画的内置组件。本文从TransitionGroup和Transition的核心区别讲起，搞清楚什么时候该用哪个、tag属性怎么用、key为什么必须加、列表项的进入和离开动 …

Vue 3 Transition组件可以封装成独立组件实现复用，也可以通过动态name和动态props实现运行时切换动画效果。本文讲解如何用插槽封装可复用Transition组件、动态过渡的实现方式、以及TransitionGroup组件的 …

Vue 3 Transition组件在使用中有不少容易忽略的细节：嵌套元素的过渡如何处理、duration属性怎么用、appear让元素首次渲染也有动画、key属性如何触发过渡。本文逐一拆解这些细节，帮你避开坑。

Vue 3 Transition组件在多个元素切换时，默认是同时执行进入和离开动画，容易导致布局重叠。本文详解过渡模式mode=“out-in"和mode=“in-out"的区 …

Vue 3 Transition组件提供了8个JavaScript钩子事件，让你可以在动画的不同阶段执行JS代码。本文详解每个钩子的触发时机、:css=“false"的用法、以及如何配合GSAP实现CSS做不到的复杂动 …

Vue 3 Transition组件支持自定义过渡类名，让你可以直接用Animate.css等第三方动画库的类名。本文讲解6个自定义类名prop、Animate.css集成方法、同时使用transition和animation时type属性 …

Vue 3的Transition组件是内置的动画利器，本文从Transition组件的基本概念讲起，搞清楚它什么时候触发、6个CSS过渡类名分别干啥、命名过渡怎么用、CSS transition和CSS animation两种方式的区别。

Vue 3的Suspense是内置组件，专门协调组件树里的异步依赖。本文从Suspense要解决的问题讲起，搞清楚async setup()怎么写、异步组件和Suspense怎么配合、suspensible选项干啥用，帮你告别满屏转圈圈的加 …

理论学完了，来点实际的！模态框组件怎么配合Transition做动画？通知栏怎么实现堆叠和自动消失？全屏遮罩怎么防止滚动穿透？三个完整实战案例，拿去直接用。

Teleport不只是传送到body那么简单。disabled让你按需开关传送，多个Teleport可以共享同一个目标容器按顺序排列，defer prop解决目标元素晚于Teleport渲染的时序问题。三个进阶玩法一次搞定。

Teleport的to属性不只是写个body那么简单，CSS选择器、DOM元素对象都能用，但每种写法都有坑。目标元素不存在会报错，动态切换目标要小心闪烁，SSR场景更是要格外注意。

模态框被父元素的transform搞偏了？z-index怎么设都不管用？Teleport就是Vue 3给你的"任意门"，把组件内容传送到DOM的任何位置，彻底告别CSS层叠上下文的噩梦。

KeepAlive好用但坑也不少：缓存组件里的定时器没清理会内存泄漏，缓存的数据太久不更新会变成"僵尸数据"，有些场景根本就不该用KeepAlive。这篇踩坑指南帮你避开所有雷区，附完整最佳实践总结。

动态组件缓存搞定了，但实际项目中更常见的是路由页面缓存。KeepAlive配合Vue Router的router-view，再加上路由meta信息动态控制哪些页面该缓存，这才是KeepAlive最实用的打开方式。

Vue 3插件进阶：配置项设计模式与默认值合并、TypeScript类型声明（模块扩展、InjectionKey、globalProperties类型增强）、Vite库模式打包发布NPM包的完整流程。

Vue 3插件通过app.component()注册全局组件、app.directive()注册全局自定义指令。本文演示如何用插件批量注册UI组件库、注册v-focus和v-permission等常用指令，以及组件库插件的最佳实践。

KeepAlive缓存的组件既不是活着也不是死了，而是"冬眠"了。onActivated在组件被激活时叫醒它，onDeactivated在组件进入缓存时让它休眠。搞懂这两个钩子和mounted/unmounted的区别， …

Vue 3插件中通过app.provide()实现应用级数据注入，组件中用inject()获取。对比globalProperties和provide/inject两种方式的优缺点，掌握插件数据传递的最佳实践，包括Symbol注入键、响应式数 …

KeepAlive缓存组件很爽，但缓存太多内存就遭不住了。max属性让你限制最大缓存数量，超出的按LRU策略淘汰最久没用的组件。这篇文章帮你搞明白LRU是啥、max怎么配、缓存淘汰时组件会发生什么。

KeepAlive默认会把所有子组件都缓存，但有些组件缓存了反而占内存。include和exclude让你精准控制谁该缓存谁不该缓存，支持字符串、正则、数组三种写法，关键是组件的name要对得上。

从零开始手写一个Vue 3 i18n国际化插件，完整演示插件的创建流程：定义install方法、通过globalProperties挂载全局翻译函数、用点号分隔的key查找嵌套翻译字典、在main.js中安装插件并传入配置。

Vue 3插件（Plugins）是为Vue添加全局功能的工具代码。本文从插件的基本概念讲起，搞清楚插件和组件的区别、app.use()背后干了啥、插件能做哪些事、什么时候该用插件什么时候不该用。

动态组件切换时状态总是被重置？计数器归零、输入框清空、滚动位置丢失……KeepAlive就是Vue 3给你准备的"保鲜膜"，把切走的组件状态牢牢锁住，切回来还是原来的样子。