动态组件
动态组件适用于多个组件频繁切换的处理。<component> 用于将一个‘元组件’渲染为动态组件，以 is 属性值决定渲染哪个组件。
<div id="app">
<component :is="'ComA'"></component>
</div>
动态组件常用于实现多个组件的快速切换，例如选项卡效果。
var ComA = { template: `<div>A组件内容</div>` }
var ComB = { template: `<div>B组件内容</div>` }
var ComC = { template: `<div>C组件内容</div>` }
new Vue({
el: '#app',
data: {
titles: ['ComA', 'ComB', 'ComC'],
currentCom: 'ComA'
},
components: {
ComA, ComB, ComC
}
})
<div id="app">
<button
v-for="title in titles"
:key="title"
@click="currentCom = title"
>{{ title }}</button>
<component :is="'currentCom'"></component>
</div>
is 属性会在每次切换组件时，Vue 都会创建一个新的组件实例。
// 切换组件时，输入框会随着重新创建，无法保留原输入框内容
var ComA = { template: `<div>A组件内容：<input type="text"></div>` }
var ComB = { template: `<div>B组件内容：<input type="text"></div>` }
var ComC = { template: `<div>C组件内容：<input type="text"></div>` }
keep-alive 组件
keep-alive 组件主要用于保留组件状态或避免组件重新渲染。
<keep-alive>
<component :is="currentCom"></component>
</keep-alive>
include 属性用于指定哪些组件会被缓存，具有多种设置方式。
<keep-alive include="ComA,ComB,ComC">
<component :is="currentCom"></component>
</keep-alive>
<keep-alive :include="['ComA','ComB','ComC']">
<component :is="currentCom"></component>
</keep-alive>
<keep-alive :include="/Com[ABC]/">
<component :is="currentCom"></component>
</keep-alive>
exclude 属性用于指定哪些组件不会被缓存，和 include 类似，同样有三种书写方式。
<keep-alive exclude="ComD">
<component :is="currentCom"></component>
</keep-alive>
max 属性用于设置最大缓存个数。
<keep-alive max="5">
<component :is="currentCom"></component>
</keep-alive>
过渡组件
过渡组件用于在 Vue 插入、更新或者移除 DOM 时， 提供多种不同方式的应用过渡、动画效果。
transition 组件
用于给元素和组件添加进入/离开过渡：
- 条件渲染 (使用 v-if )
- 条件展示 (使用 v-show )
- 动态组件
- 组件根节点
组件提供了 6个 class，用于设置过渡的具体效果。
-
进入的类名：
-
v-enter入场前样式，即没有显示之前的状态； -
v-enter-to入场完毕之后最终显示完全的状态，此时动画已经结束； -
v-enter-active入场过程的控制，设置动画。
-
-
离开的类名：
-
v-leave准备离场的状态； -
v-leave-to已经离场的状态； -
v-leave-active离场过程的控制。
-
<transition>
<p v-if="showDemo">hello world</p>
</transition>
.v-enter-active, .v-leave-active {
transition: all 0.5s;
}
.v-enter, .v-leave-to {
opacity: 0;
}
相关属性
给组件设置 name 属性，可用于给多个元素、组件设置不同的过 渡效果，这时需要将 v- 更改为对应 name- 的形式。
例如，<transition name="demo"> 的对应类名前缀为：demo-enter，demo-leave，...
通过 appear 属性，可以让组件在初始渲染时实现过渡。
<transition appear>
<p v-if="showDemo">hello world</p>
</transition>
自定义过渡类目
自定义类名比普通类名优先级更高，在使用第三方 CSS 动画库时非常有用。
用于设置自定义过渡类名的属性如下：
- enter-class
- enter-active-class
- enter-to-class
- leave-class
- leave-active-class
- leave-to-class
用于设置初始过渡类名的属性如下：
- appear-class
- appear-to-class
- appear-active-class
.v-enter-active, .v-leave-active {
transition: all 0.5s;
}
.v-enter, .v-leave-to {
opacity: 0;
}
.demo {
transition: all 3s;
}
<transition
enter-active-class="demo"
leave-active-class="demo"
>
<p v-if="showDemo">hello world</p>
</transition>
Animate.css 是一个第三方 CSS 动画库，通过设置类名来给元素添加各种动画效果，使用时必须设置基础类名 animate__animated 。
<transition
enter-active-class="animate__bounceInDown"
leave-active-class="animate__bounceOutDown"
>
<p v-if="showDemo"
class="animate__animated"
>hello world</p>
</transition>
使用注意：Animate.css 在 4.x 版本之后需要加 animate__ 前缀，而为了和前面的版本兼容，官方还提供了不需要加前缀的 compat 版本，但是建议使用完整版本，防止类名冲突。
transition-group 组件
<transition-group> 用于给列表统一设置过渡动画，该组件会默认生成一个 <span> 标签的容器元素，动画效果设置方式和 transition 是一样的。
- tag 属性用于设置容器元素，默认为 <span>。
- 过渡会应用于内部元素，而不是容器。
- 子节点必须有独立的 key，动画才能正常工作。
<transition-group tag="ul">
<li
v-for="item in items"
:key="item.id"
>{{ item.title }}</li>
</transition-group>
当列表元素变更导致元素位移，可以在 CSS 中通过 .v-move 类名内设置移动时的效果。
/* 让元素离场的过程中脱离标准流，防止因为占位原因 v-move 效果不显示 */
.v-leave-active {
position: absolute;
}
.v-move {
transition: all 0.5s;
}
