vue高级特性之动态组件、异步组件、缓存

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' // 默认显示组件 one
	    tabs: [
	    	{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>