Posts.

Vue 3工具链的最后部分涵盖代码格式化、SFC自定义块集成和底层编译库。本文详解Vue Official和Prettier的格式化、SFC自定义块（如docs块）怎么 …

Vue 3项目的质量保障离不开TypeScript类型检查、自动化测试和代码规范。本文详解Vue Official扩展的类型检查能力、vue-tsc命令行工具、Cypress和Vitest两种测试方案、以及eslint-plugin-vue …

Vue 3开发推荐用VS Code配合Vue - Official扩展（原Volar），提供语法高亮、TypeScript支持和模板智能提示。本文详解VS Code插件配置、Vetur和Volar的区别、WebStorm支持、以及Vue浏览 …

Vue 3有多种构建文件版本，runtime版本不含编译器体积小，完整版含编译器支持浏览器内模板编译。本文详解无构建步骤时模板怎么编译、runtime和完整版的区别、14kb体积差、默认工具链用哪个版本、以及如何在有构建步骤时仍用浏览器内编 …

Vue 3不用本地装环境也能玩，在线演练场让你浏览器里直接写Vue。本文详解Vue SFC演练场和StackBlitz两种在线环境、create-vue脚手架怎么用、Vite和Vue CLI的区别、以及从Vue CLI迁移到Vite的注意事 …

传统Web开发认为HTML/CSS/JS应该分文件存放，但Vue SFC把它们放一起。本文详解关注点分离的真正含义、为什么组件内聚比文件类型分离更重要、以及不想用SFC时如何通过资源导入获得热更新和预编译功能。

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最实用的打开方式。