1. <component> - 动态组件（组件变身器）
<template><component :is="currentComponent" /> </template> <script setup> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue'const currentComponent = ref('ComponentA') // 可以切换为 ComponentB </script>
通俗理解：可以根据条件切换显示不同的组件，就像给你的页面加了个“变形按钮”。
2. <Transition> - 过渡动画（优雅的入场退场）
-
Transition 的 6 个类名：
-
v-enter-from：进入前 -
v-enter-active：进入中 -
v-enter-to：进入后 -
v-leave-from：离开前 -
v-leave-active：离开中 -
v-leave-to：离开后
-
<template><button @click="show = !show">切换</button><Transition name="fade"><p v-if="show">我会淡入淡出</p></Transition> </template><style> .fade-enter-active, .fade-leave-active {transition: opacity 0.5s; } .fade-enter-from, .fade-leave-to {opacity: 0; } </style>
通俗理解：给元素的显示/隐藏加上动画效果，就像电影里的淡入淡出。
3. <TransitionGroup> - 列表过渡（集体舞动画）
<template><TransitionGroup name="list" tag="ul"><li v-for="item in items" :key="item.id">{{ item.name }}</li></TransitionGroup> </template>
通俗理解：当列表元素增加、删除或移动时，给所有元素加动画，就像排队的人有秩序地移动。
4. <KeepAlive> - 组件缓存（记忆组件）
<template><KeepAlive><component :is="currentTab" /></KeepAlive> </template>
通俗理解：切换组件时保留它的状态（比如表单输入的内容），而不是每次都重新创建。
5. <Teleport> - 传送门（任意门）
<template><button @click="showModal = true">打开弹窗</button><!-- 把弹窗传送到 body 下 --><Teleport to="body"><div v-if="showModal" class="modal">我是一个弹窗</div></Teleport> </template>
通俗理解：可以把组件渲染到 DOM 的任意位置，比如把弹窗放到页面最外层，避免样式冲突。
6. <Suspense> - 异步组件（加载状态处理）
<template><Suspense><!-- 加载完成的组件 --><template #default><AsyncComponent /></template><!-- 加载中的状态 --><template #fallback><div>加载中...</div></template></Suspense> </template><script setup> import { defineAsyncComponent } from 'vue'const AsyncComponent = defineAsyncComponent(() =>import('./AsyncComponent.vue') ) </script>
通俗理解：优雅地处理异步组件的加载状态，在组件加载完成前显示 loading 效果。
7. <slot> - 插槽（组件的内容占位符）
<!-- Child.vue --> <template><div class="card"><slot name="header"></slot><slot>默认内容</slot><slot name="footer"></slot></div> </template><!-- Parent.vue --> <template><Child><template #header><h2>这是标题</h2></template><p>这是主要内容</p><template #footer><button>确定</button></template></Child> </template>
通俗理解：允许父组件向子组件传递 HTML 结构，就像给组件开几个“窗口”，让外面可以放东西进来。