【Vue】keep-alive

keep-alive是Vue提供给我们使用的高阶组件。我们可以使用keep-alive缓存需要缓存的组件，进而节省性能。当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行。
被keep-alive包裹的内容会被缓存，当然我们并不是所有的页面都要缓存，Vue提供了include、exclude两个属性给我们有条件的缓存。

<keep-alive include="nameList">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="adminList">
      <router-view></router-view>
</keep-alive>

上面代码表示组件名为nameList的组件将被缓存，而除了名为adminList的组件都会被缓存。我们可以使用正则来匹配我们需要的组件名称。
在实际项目开发中，我们可以结合router的meta配置来按需进行组件缓存，如iView admin中就封装了组件缓存功能。

<keep-alive :include="cacheList">
    <router-view/>
</keep-alive>

绑定了一个缓存列表，我们看看缓存列表怎么实现

cacheList () {
   return this.tagNavList.length ? this.tagNavList.filter(item => !(item.meta && item.meta.notCache)).map(item => item.name) : []
},

这个就是过滤出路由配置中notCache为false的路由名字

{
    path: '/login',
    name: 'login',
    meta: {
      title: 'Login - 登录',
      notCache: true
    },
    component: Login
  },

这就是在路由文件中的配置