Vue3 内置组件

作者：程序员海军

2023-04-19
上海
本文字数：1593 字
阅读完需：约 5 分钟

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

会在一个元素或组件进入和离开 DOM 时应用动画。本章节会介绍如何使用它。
会在一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。

Transition 组件

是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素切换的动态组件

<template>    <div>        <h1>内置组件</h1>        <el-button type="primary" size="default" @click="changeStatus">动画组件--- 测试 </el-button>        <Transition>                        <div v-show="status">                    <h1>测试</h1>                    <el-tag>Tag 1</el-tag>                    <el-tag class="ml-2" type="success">Tag 2</el-tag>                    <el-tag class="ml-2" type="info">Tag 3</el-tag>                    <el-tag class="ml-2" type="warning">Tag 4</el-tag>                    <el-tag class="ml-2" type="danger">Tag 5</el-tag>                </div>        
        </Transition>    </div></template>
<script setup>import {ref} from 'vue'

const status = ref(false)const changeStatus = () => {    status.value = !status.value}</script>
<style lang="less" scoped>/* 下面我们会解释这些 class 是做什么的 */.v-enter-active,.v-leave-active {  transition: opacity 0.5s ease;}
.v-enter-from,.v-leave-to {  opacity: 0;}
</style>

复制代码

:::danger<Transition 仅支持单个元素或组件作为其插槽内容。如果内容是一个组件，这个组件必须仅有一个根元素。**:::

TransitionGroup

TransitionGroup 和的区别#

支持和基本相同的 props、CSS 过渡 class 和 JavaScript 钩子监听器，但有以下几点区别：

默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
过渡模式在这里不可用，因为我们不再是在互斥的元素之间进行切换。
列表中的每个元素都必须有一个独一无二的 key attribute。
CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上。

:::danger**当在 **DOM 模板中使用时，组件名需要写为。:::

https://juejin.cn/post/7109645966361231391

KeepAlive

使用

<!-- 非活跃的组件将会被缓存！ --><KeepAlive>  <component :is="activeComponent" /></KeepAlive>

复制代码

包含排除

include: 包含缓存的组件 exclude：排除缓存的组件

<!-- 以英文逗号分隔的字符串 --><KeepAlive include="a,b">  <component :is="view" /></KeepAlive>
<!-- 正则表达式 (需使用 `v-bind`) --><KeepAlive :include="/a|b/">  <component :is="view" /></KeepAlive>
<!-- 数组 (需使用 `v-bind`) --><KeepAlive :include="['a', 'b']">  <component :is="view" /></KeepAlive>

复制代码

缓存组件个数

如果缓存的实例数量即将超过指定的那个最大数量，则最久没有被访问的缓存实例将被销毁，以便为新的实例腾出空间。

<KeepAlive :max="10">  <component :is="activeComponent" /></KeepAlive>

复制代码

缓存组件的生命周期

当一个组件被 keep-alive 缓存起来，当关闭该页面时，它实际没有被销毁，只是变为不活跃状态。当再次激活时，它的组件状态依然存在。如果想让组件状态一直保留，可以通过 onActivated() 和 onDeactivated() 注册相应的两个状态的生命周期钩子：

<script setup>import { onActivated, onDeactivated } from 'vue'
onActivated(() => {  // 调用时机为首次挂载  // 以及每次从缓存中被重新插入时})
onDeactivated(() => {  // 在从 DOM 上移除、进入缓存  // 以及组件卸载时调用})</script>

复制代码

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/bf98644c56288fdff7415a06c】。文章转载请联系作者。

程序员海军

关注

🏆微信公众号：【前端自学社区】 2020-04-02 加入

🏅目前从事物流，铁路相关的前端全栈开发工作. 🏆 InfoQ 首批签约作者 🏆荣获2021/2022年度社区共建奖 😊个人微信： daxin261

发布

暂无评论

创作场景

Vue3 内置组件

Transition 组件

TransitionGroup

TransitionGroup 和 的区别#

KeepAlive

使用

包含排除

缓存组件个数

缓存组件的生命周期

程序员海军

评论

TransitionGroup 和的区别#