内置组件

Vue 3 提供了一系列内置组件，用于处理常见场景如动态组件、过渡动画、插槽分发等。这些组件开箱即用，无需额外安装，显著提升了开发效率。以下是对核心内置组件的详细解析：

---

<Transition> 组件

用法: 用于在元素/组件进入或离开 DOM 时应用动画效果。通过 name 属性定义过渡类名前缀（如 fade 生成 .fade-enter-active 等类），或直接使用 enter-active-class 等属性指定自定义类名。

典型场景: 路由切换、模态框显隐、列表项增删。支持 CSS 过渡/动画或 JavaScript 钩子（如 @before-enter）。

CSS 类名规则：

• v-enter-from：进入动画开始状态
• v-enter-to：进入动画结束状态
• v-leave-from：离开动画开始状态
• v-leave-to：离开动画结束状态

注意事项:

• 确保目标元素有 v-if/v-show 或动态组件切换触发条件。
• 使用 mode="out-in" 避免同时执行进入/离开动画。
• 列表动画需为元素设置唯一 key。

示例:

<Transition name="fade">
  <div v-if="show">内容</div>
</Transition>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.5s; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>

---

<TransitionGroup> 组件

用法: 为列表中的多个元素提供过渡效果。需为每个子元素设置 key，默认渲染为 <span>，可通过 tag 属性修改。

典型场景: 动态列表排序、过滤、增删（如拖拽排序、待办事项列表）。

注意事项:

• 列表移动动画需添加 .v-move 类或指定 move-class。
• 使用 CSS transform 优化性能，避免布局抖动。

示例:

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

<style>
.list-move { transition: transform 0.8s ease; }
</style>

---

<KeepAlive> 组件

用法: 缓存动态组件状态，避免重复渲染。通过 include/exclude 控制缓存范围，或 max 限制缓存数量。

典型场景: 标签页切换、表单步骤保留填写数据、路由组件缓存（需配合 <router-view>）。

常用属性：

• include：指定需要缓存的组件名
• exclude：指定不需要缓存的组件名
• max：最大缓存实例数

注意事项:

• 被缓存的组件会触发 activated/deactivated 生命周期。
• 大量缓存可能引起内存问题，需合理设置 max。

示例:

<KeepAlive :include="['TabA', 'TabB']">
  <component :is="currentComponent"></component>
</KeepAlive>

---

<Teleport> 组件

用法: 将子元素渲染到指定 DOM 节点（如 to="body"）。支持条件渲染，未激活时内容保留原位置。

典型场景: 全局弹窗、通知、工具栏悬浮层，避免父组件样式影响（如 overflow:hidden）。

注意事项:

• 目标节点需在挂载前存在。
• 与 <Transition> 联用时，需将 <Teleport> 作为外层。

示例:

<Teleport to="#modals">
  <div v-if="showModal" class="modal">内容</div>
</Teleport>

---

<Suspense> 组件

用法: 管理异步依赖（如异步组件、async setup()），通过 #default 和 #fallback 插槽显示加载状态。

典型场景: 异步组件加载、数据请求等待期显示骨架屏。

注意事项:

• 用于异步组件加载状态管理，需配合 defineAsyncComponent 使用。默认插槽展示异步组件，fallback 插槽展示加载状态。
• 异步组件需抛出 Promise，错误通过 onErrorCaptured 捕获。嵌套 Suspense 时，由最近的父级处理加载状态。

示例:

<Suspense>
  <template #default><AsyncComponent /></template>
  <template #fallback><div>Loading...</div></template>
</Suspense>

---

综合使用建议

1. 组合场景:

   • <KeepAlive> + <Transition> 缓存路由动画。
   • <Teleport> + <Transition> 实现全局弹窗动画。
   • <Suspense> 包裹异步路由组件提升用户体验。

2. 性能优化:

   • 避免 <TransitionGroup> 过度渲染，结合 v-memo。
   • <KeepAlive> 的 max 需根据业务权衡。

3. 调试技巧:

   • 使用 Vue DevTools 检查 <Teleport> 目标位置。
   • 通过 transitionend 事件调试动画时序。

---

总结与推荐

1. 组件选择:

   • 单一元素动画用 <Transition>，列表用 <TransitionGroup>。
   • 需要状态保留时优先考虑 <KeepAlive>。
   • 脱离当前 DOM 结构使用 <Teleport>。

2. 最佳实践:

   • 动画类名遵循 .v-enter-active 约定以提高可维护性。
   • 异步组件与 <Suspense> 联用需做好错误边界处理。

3. 规避陷阱:

   • <Transition> 目标元素需为块级元素。
   • <Teleport> 目标节点避免重复挂载。

转载自CSDN-专业IT技术社区

原文链接：https://blog.csdn.net/weixin_47160167/article/details/151750932