当前位置：首页 > news >正文

vue3 内置组件

news 2025/8/24 11:35:59

请添加图片描述

文章目录

前言
一、过渡效果相关的组件
- 1、Transition
- 2、TransitionGroup
二、状态缓存组件（KeepAlive）
三、传送组件（Teleport ）
四、异步依赖处理组件（Suspense）

前言

在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组件的步骤如下：

导入Transition组件：

import { Transition } from 'vue'

在模板中使用Transition组件：

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

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

使用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的一些缺点

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

2、TransitionGroup

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

TransitionGroup组件的属性

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

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

下面是使用 <transition-group> 的基本步骤：

首先，确保你已经在你的项目中引入了 Vue 和 Vue 的过渡 CSS 文件（如 vue.css 或者 vue.min.css）。
在你想要添加过渡效果的元素外面包裹一个 <transition-group> 组件，并给它一个唯一的 name 属性。
```
<transition-group name="fade">
</transition-group>
```
在 <transition-group> 中，可以使用 v-for 循环遍历一个数组或者对象，并为每个元素生成一个需要添加过渡效果的子元素。
```
<transition-group name="fade"><div v-for="item in items" :key="item.id"></div>
</transition-group>
```
在这个例子中，items 是一个包含子元素信息的数组，每个子元素都有一个唯一的 id。
在 CSS 文件（或者在 <style> 标签中）中，为过渡效果定义对应的类名，并设置相应的样式。
```
/* 定义淡入效果的类名 */
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}.fade-enter, .fade-leave-to {opacity: 0;
}
```
在这个例子中，我们通过设置 opacity 属性来实现淡入淡出的效果。

在 Vue 的实例中，定义 items 数组，并可以通过添加或者删除数组中的元素来触发过渡效果。

new Vue({el: '#app',data: {items: [{ id: 1, content: 'Item 1' },{ id: 2, content: 'Item 2' },{ id: 3, content: 'Item 3' }]},methods: {addItem() {this.items.push({ id: this.items.length + 1, content: 'NewItem' });},removeItem(index) {this.items.splice(index, 1);}}
});

在这个例子中，我们可以通过调用 addItem 和 removeItem 方法来添加或者删除数组中的元素，从而触发过渡效果。

二、状态缓存组件（KeepAlive）

KeepAlive 是用来来缓存动态组件的。用于缓存需要多次渲染的组件，以提高性能。它会将包裹的子组件全部缓存起来，当组件切换时，会直接从缓存中获取组件而不是重新创建。

要使用KeepAlive组件，首先需要在组件的父组件中包裹KeepAlive标签，然后将需要缓存的子组件放在KeepAlive标签的内部。例如：

<template><div><button @click="toggleComponent">Toggle Component</button><keep-alive><component1 v-if="showComponent1" /><component2 v-else /></keep-alive></div>
</template><script setup>
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'const showComponent1=ref(true)const toggleComponent=()=>{showComponent1.value=!showComponent1.value
}
</script>

在上面的例子中，使用了一个按钮来切换两个子组件Component1和Component2的显示。当点击按钮时，切换显示不同的子组件。由于包裹了KeepAlive标签，所以每次切换组件时，组件的状态会被缓存，以便在下次显示时保留。

需要注意的是，在使用KeepAlive组件时，动态组件的切换需要使用v-if和v-else来实现，而不是使用v-show。这是因为KeepAlive会根据组件的实例来判断是否需要缓存组件的状态，而v-show只是简单地切换组件的显示和隐藏，并不会销毁和重建组件的实例。

使用KeepAlive还可以通过设置include和exclude属性来控制哪些组件需要缓存，以及哪些组件不需要缓存。例如：

<keep-alive :include="[Component1, 'component2']" :exclude="['component3']"><component1 /><component2 /><component3 />
</keep-alive>

上面的例子中，设置了include属性为[Component1, ‘component2’]，意味着只缓存Component1和component2组件的状态；同时设置了exclude属性为[‘component3’]，意味着不缓存component3组件的状态。

以上就是在Vue 3中使用KeepAlive组件的简单介绍和使用方式。使用KeepAlive可以提高组件的性能，特别是对于一些需要频繁切换的组件，可以显著减少组件的重渲染次数，提高页面的响应速度。

三、传送组件（Teleport ）

Teleport 是一个新的特性，它可以让你将组件的内容渲染到 DOM 结构中的任意位置，而不一定是组件所在的父组件。

使用 Teleport 的步骤如下：

在你需要渲染 Teleport 的组件上引入 teleport 函数： import { createApp, h, teleport } from 'vue';
在组件的 setup 方法中调用 teleport 函数来创建一个 Teleport 组件实例，例如：const teleportTarget = teleport()
在模板中使用 <teleport> 标签包裹需要渲染的内容，并使用 to 属性来指定渲染到哪个目标位置，例如：<teleport to="my-target">...</teleport>
在需要渲染 Teleport 的位置上添加一个具有相同 id 的元素，例如：<div id="my-target"></div>
在 Teleport 的目标位置上使用 teleportTarget 实例来渲染，例如：teleportTarget.mount('#my-target')

完整的示例代码如下：

<template><div><button @click="showModal = true">打开模态框</button><teleport to="my-target"><Modal v-if="showModal" @close="showModal = false"/></teleport></div>
</template><script setup>
import { defineComponent, h, teleport } from 'vue';
import Modal from './Modal.vue';const teleportTarget = teleport();const showModal = ref(false);teleportTarget.mount('#my-target');
</script>

在上面的示例中，点击按钮会打开一个模态框，模态框的内容会被渲染到 id 为 my-target 的元素中。

四、异步依赖处理组件（Suspense）

Suspense组件是用来来处理异步组件的加载和错误处理。

使用<Suspense>组件包裹异步加载的组件，如下所示：

<template><div><Suspense><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template></Suspense></div>
</template><script setup>
import { defineAsyncComponent, Suspense } from 'vue';const AsyncComponent = defineAsyncComponent(() =>import('./AsyncComponent.vue')
);</script>

在这个例子中，Suspense组件包裹了异步加载的组件AsyncComponent。<template #fallback>标签中的内容会在异步组件加载期间显示，直到异步组件加载完成。

需要注意的是，在Vue 3中，异步组件的默认导出方式发生了变化，你需要使用defineAsyncComponent()函数来定义异步组件。

当异步组件加载完成后，它将会渲染在<template #default>标签中的内容。

此外，你还可以使用<Suspense>组件的error事件来处理异步组件加载失败的情况，如下所示：

<template><div><Suspense @error="handleError"><template #default><AsyncComponent /></template><template #fallback><div>Loading...</div></template></Suspense></div>
</template><script setup>
import { defineAsyncComponent, Suspense } from 'vue';const AsyncComponent = defineAsyncComponent(() =>import('./AsyncComponent.vue')
);const handleError = (error) = > {console.error('Failed to load async component:', error);
}
</script>