动态组件

动态组件适用于多个组件频繁切换的处理。<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;
}