本文实例讲述了Vue动态组件与异步组件。分享给大家供大家参考，具体如下：
1 在动态组件上使用 keep-alive
我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件：
<component v-bind:is="currentTabComponent"></component>当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：
你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的
currentTabComponent 实例。重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个
<keep-alive> 元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。
html：
<div id="dynamic-component-demo">
<button
v-for="tab in tabs"
v-bind:key="tab"
v-bind:class="['tab-button',{active:currentTab === tab}]"
v-on:click="currentTab = tab"
>{{ tab }}
</button>
<keep-alive>
<component
v-bind:is="currentTabComponent"
class="tab"></component>
</keep-alive>
</div>js：
Vue.component('tab-posts', {
data: function () {
return {
posts: [
{
id: 1,
title: '赶在618前夕，微信更新了两个支付与电商功能',
content: '本周末，中国消费者即将迎来上半年最大的消费网购峰值，6月17日父亲节，6月18日端午节，也是京东、天猫等电商的618购物节。略微出人意料但又在情理之中的是，中国最大的社交平台微信，近日密集上线了两个与支付和电商相关的功能。'
},
{
id: 2,
title: '腾讯要花32亿收购《绝地求生》开发商10%股份',
content: '目前腾讯和蓝洞已经接近达成协议，如果交易成功，腾讯将成为蓝洞的第二大股东。'
