Vue动态组件与异步组件实例详解，如何实现高效加载与渲染？

本文共计1931个文字，预计阅读时间需要8分钟。

原文示例：本文字例讲述了Vue动态组件与异步组件。分享给大众供应商大参考，具体如下：+1+ 在动态组件上使用 keep-alive，我们之前曾在一个多标签的界面中使用 is 特性来切换不同的组件：+component+

本文实例讲述了Vue动态组件与异步组件。分享给大家供大家参考，具体如下：

1 在动态组件上使用 keep-alive

我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件：

<component v-bind:is="currentTabComponent"></component>

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。