<component>：动态组件 核心组件

大白话解释：就像一个万能播放器，可以随时切换播放不同的视频（组件）。你只需要告诉它现在播放哪个，它就自动切换。

基础用法

使用 :is 属性绑定要显示的组件：

<component :is=”currentComponent”></component>

实际应用场景

  • 标签页切换(Tab组件)
  • 根据用户权限显示不同组件
  • 动态表单字段切换

注意：动态组件切换时，默认情况下组件会被销毁并重新创建。如果希望保留组件状态，请配合 <keep-alive> 使用。

完整示例

<script setup> import Home from ‘./Home.vue’ import About from ‘./About.vue’ import Contact from ‘./Contact.vue’ </script> <template> <button @click=”current = ‘Home'”>首页</button> <button @click=”current = ‘About'”>关于</button> <button @click=”current = ‘Contact'”>联系</button> <component :is=”current” /> </template>

<transition>：过渡动画 视觉增强

大白话解释：就像给组件添加入场和离场的动画效果。比如页面切换时的淡入淡出效果，列表项的滑动效果。

基本用法

<transition name=”fade”> <div v-if=”show”>内容</div> </transition>

六个过渡类名

根据 name 属性自动生成：

  • v-enter-from: 进入动画开始状态
  • v-enter-active: 进入动画过程
  • v-enter-to: 进入动画结束状态
  • v-leave-from: 离开动画开始状态
  • v-leave-active: 离开动画过程
  • v-leave-to: 离开动画结束状态

过渡效果演示

淡入淡出

滑动效果

缩放效果

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

<keep-alive>：组件缓存 性能优化

大白话解释：就像给组件按了”暂停键”。当组件暂时不用时，Vue不会销毁它，而是把它保存起来，下次再用时直接恢复之前的状态。

基本用法

<keep-alive> <component :is=”currentComponent” /> </keep-alive>

适用场景

  • 标签页切换时保存表单数据
  • 保存滚动位置
  • 避免重复加载数据
  • 保存视频播放进度

生命周期钩子

使用 keep-alive 的组件会触发两个额外的生命周期钩子：

  • activated – 组件被激活时调用
  • deactivated – 组件被缓存时调用

注意：keep-alive 会占用更多内存，所以不要过度使用。通常只缓存那些状态复杂、加载成本高的组件。

缓存多个组件

<keep-alive :max=”5″> <router-view></router-view> </keep-alive>

:max 属性限制最大缓存组件数，防止内存占用过多。

<teleport>：传送门 DOM操作

大白话解释：就像哆啦A梦的任意门，可以把组件”传送”到DOM树的其他位置（比如 body 末尾），常用于模态框、通知提示等。

基本用法

<teleport to=”body”> <div class=”modal”> <!– 模态框内容 –> </div> </teleport>

为什么需要传送？

  • 解决z-index堆叠上下文问题
  • 避免父组件样式影响(CSS作用域)
  • 确保组件在视觉上位于正确层级
  • 将组件移动到更容易管理的位置

常见传送目标

to="#modal-container"   // 传送到指定的DOM元素
to="body"              // 传送到body末尾
to=".app-container"    // 传送到类名为app-container的元素

<Suspense>：异步组件 数据加载

大白话解释：就像给你的组件加了个加载指示器。当组件还在加载数据时，先显示一个加载动画，等数据加载完成再显示真正的内容。

基本用法

<Suspense> <template #default> <AsyncComponent /> <!– 异步加载的组件 –> </template> <template #fallback> <div>加载中…</div> <!– 加载时显示内容 –> </template> </Suspense>

工作原理

  1. 组件加载时显示 fallback 内容
  2. 异步操作（通常是API请求）完成后
  3. 自动切换到 default 内容

注意：Suspense 是 Vue3 新增的实验性功能，API 可能在后续版本中调整。

定义异步组件

// 使用 defineAsyncComponent 定义异步组件 const AsyncComponent = defineAsyncComponent(() => import(‘./AsyncComponent.vue’) )

<slot>：插槽 组件复用

大白话解释：就像预留的”洞”，让父组件可以向子组件内部传递内容（HTML结构）。

基本用法

子组件中定义插槽：

<!– ChildComponent.vue –> <div class=”card”> <div class=”header”> <slot name=”header”>默认标题</slot> </div> <div class=”content”> <slot>默认内容</slot> </div> </div>

父组件中使用：

<ChildComponent> <template v-slot:header> <h2>自定义标题</h2> </template> <p>这是自定义内容</p> </ChildComponent>

插槽类型

  • 默认插槽：未命名插槽，父组件未指定名字的内容会放在这里
  • 命名插槽：具有名称的插槽，用于精确放置内容
  • 作用域插槽：子组件向插槽传递数据

作用域插槽示例

<!– 子组件 –> <ul> <li v-for=”item in items”> <slot :item=”item”>{{ item.name }}</slot> </li> </ul> <!– 父组件 –> <ChildComponent> <template v-slot:default=”slotProps”> <span>{{ slotProps.item.id }} – {{ slotProps.item.name }}</span> </template> </ChildComponent>