- 业务上的需求是
-
根据用户登陆进来不同的身份展示不同的tab页，所以tab页是灵活的。所以用动态组件
-
tab来回切换用到了keep-alive缓存组件内容。
结合使用组件：
<keep-alive>
<component :is="item.name" :include="whiteList" :exclude="blackList"></component>
</keep-alive>
底部data定义变量
whiteList:['styleLibrary','OrderList','SalesData'],
blackList:['Footer'],
通过灵活改变is绑定的值来显示不同的组件，多个tab页用的for循环
- keep-alive
keep-alive 包裹的组件在 created 生命周期时会创建一个 cache 对象，保存 vnode 节点，在需要渲染时将 vnode 从 cache 对象中取出来渲染，在组件销毁 destroyed 时清除 cache。
通过 include 和 exclude 确定需要缓存的组件和不需要缓存的组件。
生命周期有两个，actived，deactived activated：组件被缓存后进入组件触发的事件，使用场景： 比如我们缓存了一个组件，但是在进入组件之后还要调某一个接口，而不是调所有接口，就可以把方法写到这里面 deactivated：退出组件时候调用的方法。
- 延伸： keepalive这个概念在很多地方都有用到，比如
- tcp也用到了keepalive这个概念，意思是检测链接的可用性，发送空包确定还在链接状态
- http也用到了keep-alive，加了中线，在请求头中加入connection:keep-alive，意思是告诉服务端，在发送完数据以后不要关闭连接，后面还会有别的请求，这样可以避免重复三次握手四次挥手
- component 动态组件
动态组件的原理是多个组件使用同一个挂载点，并且动态切换。这个实在不知道说啥。
延伸的有个异步组件可以说一说 类似的说法还有按需加载
异步组件就是在定义路由的时候不是单纯的引入组件，而是通过函数的方式引入
const first = r => require.ensure([], () => r(require('../components/first.vue'``)), 'chunkname1')
通过函数加载的方式可以在组件被调用时才加载组件，这样减少了首屏加载所有组件的压力，
- 第一个参数是模块的依赖，一般定义组件都是[]
- 第二个参数是加载完成后的回调函数，
- 第三个参数是指定chunk名称，名称一样的会放在同一个文件夹
网上看到一句 但是还是不太理解 webpack把这个模块导出一个js文件，然后用到这个模块的时候，就动态构造script标签插入DOM，再由浏览器去请求。回调函数是在依赖加载完成之后执行。
