vue3 内置组件

---

---

前言

在vue3中 其提供了5个内置组件 Transition 、TransitionGroup 、KeepAlive 、Teleport 、Suspense ，其中 Transition 、TransitionGroup 是用于状态变化的过渡和动画，KeepAlive 是用于多个组件间动态切换时缓存被移除的组件实例，Teleport 是
用于将一个组件内部的一部分模板“传送”到该组件的 DOM 结构外层的位置去，Suspense 目前还是实验性功能，是用来在组件树中协调对异步依赖的处理。接下来我们详细介绍每一个组件的用法及应用场景

---

一、过渡效果相关的组件

1、Transition

Transition 是Vue提供的用于在元素进入和离开DOM时添加动画效果的组件，Transition用于单个元素的过渡效果，可以定义进入和离开时的不同状态

Transition组件的属性

• name：过渡效果的名称，用于定义对应的CSS类。 appear：是否在初始渲染时应用过渡效果。
• mode：过渡模式，可以是in-out（默认）、out-in或in-out。
• enter-class、enter-active-class、enter-to-class：进入过渡时应用的CSS类。
• leave-class、leave-active-class、leave-to-class：离开过渡时应用的CSS类。

Transition 触发条件

• 由 v-if 所触发的切换
• 由 v-show 所触发的切换
• 由特殊元素 切换的动态组件
• 改变特殊的 key 属性

以上任意一个条件满足即可触发

Transition组件基于CSS过渡和动画，所以可以使用CSS属性和关键帧来自定义过渡效果。

使用Transition组件的步骤如下：

1. 导入Transition组件：

import { Transition } from 'vue'

2. 在模板中使用Transition组件：

<Transition name="fade">
  <p v-if="show">Hello, Vue 3!p>
Transition>

在上面的代码中，name属性指定了过渡效果的名称，v-if指令决定了元素是否在DOM中。

3. 使用CSS来定义过渡效果：

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

在上面的代码中，.fade-enter-active和.fade-leave-active类分别在元素进入和离开DOM时添加，定义了过渡动画的持续时间和效果。.fade-enter-from和.fade-leave-to类分别在元素进入和离开DOM时添加，定义了元素的初始和最终状态。

通过上面的步骤，我们就可以使用Transition组件来实现元素的过渡效果了。需要注意的是，在Vue 3中，name属性不再自动作为CSS类添加到组件上，所以我们需要手动定义类名来完成样式的绑定。

Transition的一些缺点

1. 对于复杂的动画效果，Transition组件的语法可能会显得有限。它主要适用于一些简单的动画效果，对于复杂的动画效果可能需要使用其他的动画库或自定义实现。
2. Transition组件对于自定义的过渡效果的支持有限。虽然Vue
   3的Transition组件提供了一些默认的过渡效果，但如果你需要自定义的过渡效果，可能需要编写一些额外的CSS或JavaScript代码来实现。

2、TransitionGroup

TransitionGroup是用来实现在多个元素之间进行过渡动画效果的组件。它可以包裹多个元素，并在这些元素的变化过程中应用过渡效果。TransitionGroup用于多个元素的过渡效果，可以监听元素的插入和删除，并为每个元素应用相应的过渡效果。

TransitionGroup组件的属性

• tag：包裹元素的标签，默认为span。
• appear：是否在初始渲染时应用过渡效果。
• mode：过渡模式，可以是in-out（默认）、out-in或in-out。

组件在 Vue 中用于在多个元素之间添加过渡效果。

下面是使用 的基本步骤：

1. 首先，确保你已经在你的项目中引入了 Vue 和 Vue 的过渡 CSS 文件（如 vue.css 或者 vue.min.css）。

2. 在你想要添加过渡效果的元素外面包裹一个 组件，并给它一个唯一的 name 属性。

   <transition-group name="fade">
     
   transition-group>
   

3. 在 中，可以使用 v-for 循环遍历一个数组或者对象，并为每个元素生成一个需要添加过渡效果的子元素。

   <transition-group name="fade">
     <div v-for="item in items" :key="item.id">
       
     div>
   transition-group>
   

   在这个例子中，items 是一个包含子元素信息的数组，每个子元素都有一个唯一的 id。

4. 在 CSS 文件（或者在