Vue 3 内置组件

Vue 3 提供了一些 内置组件，用于增强应用的功能，如条件渲染、懒加载、动态组件、动画等。以下是 Vue 3 主要的内置组件及其用法：

1. <Teleport> – 传送组件

<Teleport> 允许 将组件内容渲染到 DOM 的其他位置，常用于 模态框、通知消息 等。

示例：将模态框渲染到 <body>

<template>
  <button @click="show = true">打开模态框</button>
  
  <Teleport to="body">
    <div v-if="show" class="modal">
      <p>我是模态框</p>
      <button @click="show = false">关闭</button>
    </div>
  </Teleport>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
</script>

<style>
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
</style>

to="body" 指定渲染到 body，避免模态框受父元素 overflow:hidden 限制。

2. <KeepAlive> – 缓存组件

<KeepAlive> 用于 缓存动态组件，适用于 多页签、切换列表等，避免重复渲染。

示例：缓存 ComponentA 和 ComponentB

<template>
  <button @click="view = 'ComponentA'">显示 A</button>
  <button @click="view = 'ComponentB'">显示 B</button>

  <KeepAlive>
    <component :is="view"></component>
  </KeepAlive>
</template>

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const view = ref('ComponentA');
</script>

说明

  • <KeepAlive> 保留组件状态，避免销毁重建。

3. <Suspense> – 处理异步组件

<Suspense> 允许在 异步组件加载时显示占位内容。

示例：加载远程数据

<template>
  <Suspense>
    <AsyncComponent />
    <template #fallback>正在加载...</template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue')
);
</script>

说明

  • <template #fallback> 提供加载状态，直到 AsyncComponent 加载完成。

4. <Transition> – 进入/离开动画

<Transition> 适用于 单个元素或组件 的 过渡动画。

示例：淡入淡出

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

  <Transition name="fade">
    <p v-if="show">你好，Vue3！</p>
  </Transition>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(true);
</script>

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

说明

  • fade-enter-from & fade-leave-to 控制初始 & 结束状态。
  • fade-enter-active & fade-leave-active 定义动画时长。

5. <TransitionGroup> – 列表动画

<TransitionGroup> 适用于 多个元素的过渡动画，如 列表添加、删除。

示例：列表动态变化

<template>
  <button @click="addItem">添加项</button>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item">{{ item }}</li>
  </TransitionGroup>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([1, 2, 3]);

const addItem = () => {
  items.value.push(items.value.length + 1);
};
</script>

<style>
.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

说明

  • list-enter-from 控制新增项的初始位置。
  • list-leave-to 控制删除项的消失动画。

6. <Component> – 动态组件

<Component> 允许 根据变量动态渲染组件。

示例：动态切换组件

<template>
  <button @click="current = 'ComponentA'">A</button>
  <button @click="current = 'ComponentB'">B</button>

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

<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

const current = ref('ComponentA');
</script>

说明

  • :is="current" 动态绑定组件。

7. <slot> – 插槽

<slot> 用于 分发内容，提高组件复用性。

示例：具名插槽

<template>
  <Card>
    <template #header>我是头部</template>
    <p>我是正文内容</p>
    <template #footer>我是底部</template>
  </Card>
</template>

子组件 Card.vue

<template>
  <div class="card">
    <header><slot name="header"></slot></header>
    <main><slot></slot></main>
    <footer><slot name="footer"></slot></footer>
  </div>
</template>

说明

  • slot name="header" 渲染具名插槽。
  • <slot> 渲染默认插槽。

总结

内置组件作用
<Teleport>将内容渲染到 DOM 其他位置（如模态框）
<KeepAlive>缓存动态组件（如选项卡）
<Suspense>处理异步组件加载
<Transition>单元素/组件的动画
<TransitionGroup>列表过渡动画
<Component>渲染动态组件
<slot>插槽（内容分发）

这些内置组件极大提升了 Vue 3 组件的可维护性、用户体验和性能优化，建议合理使用来优化项目结构 🚀。