vue动态组件

	让多个组件使用同一个挂载点，并动态切换，这就是动态组件。通过使用保留的 <component>元素，动态地绑定到它的 is 特性，可以实现动态组件。

例子：

<div id="app"><component is="one"></component>
</div>
<script>
var one = {template: '<div>我是线路一</div>'};
var two = {template:'<div>我是线路二</div>'};
var three = {template:'<div>我是线路三</div>'};
new Vue({el: '#example',components: {one,two,three,}
})
</script>

	上面代码注册了三个组件，在 component 标签里有个属性 is，is=one，所以页面会渲染名字叫 one 的组件，显示结果如下：

如果给 is 属性绑定动态值，那么就可以实现组件的动态切换，例子如下：

<div id="app"><button v-for="item in tabs" @click="change = item.id">{{ item.text }}</button><component :is="change"></component>
</div>
<script>
var one = {template: '<div>我是线路一</div>'};
var two = {template:'<div>我是线路二</div>'};
var three = {template:'<div>我是线路三</div>'};
new Vue({el: '#example',components: {one,two,three,},data() {return {change: 'one' // 默认显示组件 onetabs: [{id: 'one', text: '线路一'},{id: 'two', text: '线路二'},{id: 'thr', text: '线路三'}]}}
})
</script>

	上面代码用 v-bind 给属性 is 动态传递了值，实现了组件的动态切换，效果如下：

异步组件

	异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。

new Vue({// ...components: {'my-component': () => import('./my-async-component') // 异步加载}
})

在router中配置，使用以下方法也可以实现按需加载，一个组件生成一个js文件。

{path: '/home',name: 'home',component:resove => require(['@/components/home'],resolve)
}

缓存

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

<!-- 失活的组件将会被缓存！-->
<keep-alive><component v-bind:is="currentTabComponent"></component>
</keep-alive>