【快速入门Vue系列】多元素过渡、列表过渡、复用过渡、异步组件你会几个？

过渡_多元素过渡

当切换展示的元素标签名相同时，需要给每一个元素设置不同的key值，否则Vue为了效率只会替换相同标签内部的内容。

<transition>
  <div v-if="show" key="world">hello world</div>
  <div v-else key="shanshan">hello shanshan</div>
</transition>
复制代码

在一些场景中，可以通过给同一个元素的key值设置不同的状态来替代 v-if 和 v-else。如：

<transition>
  <div :key="keyName">hello {{ key Name}}</div>
</transition>
复制代码

keyName: 'world',
复制代码

过渡模式

Vue提供一个一个 mode 特性，可以给多个元素过渡应用不同的模式，mode 的值可为：

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

多组件过渡

我们可以使用动态组件切换展示不同的组件。

过渡_列表过渡

当想要给一个列表添加过渡动效时，我们可以使用 <transition-group> 组件。

该组件的特点：

• 不同于 ，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

列表的排序过渡

<transition-group> 组件提供了一个新的特性：v-move，它会在元素改变定位的过程中应用。 如何使用？通过类名即可设置：.v-move {}。 当给 <transition-group> 设置 name 特性时，例如name为fade，则 v-move 在使用时，需要替换为 fade-move。

注意：当移除一个列表元素时，需要将移除的元素脱离文档流，否则，要溢出的元素在移除过渡中一直处于文档流中，会影响到后面元素的move过渡效果。

内部的实现：Vue 使用了一个叫 FLIP 简单的动画队列，使用 transforms 将元素从之前的位置平滑过渡新的位置。

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中。

列表的交错过渡

如果要给列表中的元素，应用更丰富的过渡效果，可以配合JavaScript钩子。

过渡_复用过渡

过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件，你需要做的就是将 或者 作为根组件，然后将任何子组件放置在其中就可以了。

注意：当使用函数式组件复用过渡时，不要设置css作用域。

组件_异步组件

在项目中，有些组件不会在第一次进入首屏时加载，而是当执行了某些操作时，才会加载进来，所以此时，我们可以将该组件设置成异步加载，什么时候用，什么时候再加载进来，以达到提升首屏性能的目的。

使用方法：

components: {
  AsyncCmp: () => import (url);
}
复制代码

将多个需要同时加载的组件合并到一个文件中：

components: {
  AsyncCmp1: () => import( /* webpackChunkName: "async" */  'url'),
  AsyncCmp2: () => import( /* webpackChunkName: "async" */  'url'),
}
复制代码

异步加载的文件，会在link标签上设置 el="prefech"。浏览器会在空闲时间内下载对应的资源，使用时可以直接从缓存中获取。与之对应的 el="preload"，会及时下载对应的资源。