Vue3 内置组件

Vue 内置了一批组件，无需 import 或注册即可在模板中直接使用：component、Transition、TransitionGroup、KeepAlive、Teleport、Suspense。它们分别解决动态渲染、过渡动画、状态缓存、DOM 传送与异步等待等问题，是写出精致页面和优化性能的利器。

component：动态组件

component 的 is 属性指向哪个组件，就渲染哪个组件：

<script setup>
import Home from './Home.vue'
import About from './About.vue'

const current = Home   // 点击导航时改成 About 即可切换
</script>

<template>
  <component :is="current" />
</template>

is 变化时，Vue 自动卸载旧组件并挂载新组件。

Transition：单元素过渡

Transition 包裹单个元素或组件，在插入、移除时自动添加过渡类名：

<button @click="show = !show">切换显示</button>

<transition name="fade">
  <p v-if="show">我会淡入淡出</p>
</transition>

配套样式遵循 fade-enter-from、fade-leave-to 等命名规律：

.fade-enter-active,
.fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from,
.fade-leave-to { opacity: 0; }

效果：段落出现时从透明渐变为不透明，消失时反向渐变。

TransitionGroup：列表过渡

给 v-for 列表整体加过渡，增删、移动元素都带动画：

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

注意列表中每一项仍然必须提供唯一的 key，否则动画无法定位元素。

KeepAlive：缓存组件

配合动态组件或路由使用时，KeepAlive 会保留组件状态而不是销毁它：

<keep-alive>
  <component :is="current" />
</keep-alive>

切换走再切回来，组件内的滚动位置、表单输入等状态原样保留，无需重新请求数据。组件可通过 onActivated 与 onDeactivated 感知「被激活/被缓存」。

Teleport：传送内容

把某段内容渲染到组件之外的 DOM 位置，最典型的是弹窗：

<teleport to="body">
  <div class="modal-backdrop">全屏弹窗内容</div>
</teleport>

弹窗最终被挂到 body 下，不受父级 overflow、z-index 等样式限制，遮罩能盖住整个页面。

小结

内置组件覆盖了渲染控制、过渡动画、状态缓存与 DOM 传送等通用需求。先掌握 component 与 KeepAlive 的动态组合，再配合 Transition 做出动画，页面的灵活度与质感会明显提升。