Vue keep-alive数据缓存与activated、deactivated钩子

keep-alive是Vue的内置组件，可以将状态保留在内存中，防止组件切换过程中重复渲染DOM

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

属性：

include: 字符串或正则表达式。只有匹配的组件会被缓存。-
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

// 组件
<script>
export default {
  name: 'Sidebar',
  data () {
    return {
        componentName: Sidebar
    }
  }
}
</script>

<keep-alive include="Sidebar">
  <!-- 将缓存name为Sidebar的组件 -->
  <component></component>
</keep-alive>

<keep-alive include="a,b">
  <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
  <component :is="view"></component>
</keep-alive>

<!-- 使用正则表达式，需使用v-bind -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 动态判断 -->
<keep-alive :include="componentName">
  <router-view></router-view>
</keep-alive>

<keep-alive exclude="Sidebar">
  <!-- 将不缓存name为Sidebar的组件 -->
  <component></component>
</keep-alive>

结合router缓存页面

注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

<!-- 使用$route.meta的属性 -->
<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

需要在router中设置router的元信息 meta

//...router.js
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello,
      meta: {
        keepAlive: false // 不需要缓存
      }
    },
    {
      path: '/page1',
      name: 'Page1',
      component: Page1,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
  ]
})

如果不使用keep-alive的include，则直接缓存所有页面

<!-- 实际项目中可能部分页面需要缓存，部分不需要 -->
<transition name="fade-transform" mode="out-in">
  <keep-alive>
    <router-view v-if="cache" :key="key"></router-view>
  </keep-alive>
</transition>
<!-- 在vuex中可以动态改变cache，实现缓存取舍 -->
<transition name="fade-transform" mode="out-in">
  <router-view v-if="!cache"></router-view>
</transition>

使用keep-alive可以缓存页面，提高用户体验，同时keep-alive提供了两个钩子函数activated，deactivated

后台管理系统中可以将table数据请求放在activated钩子中，进入页面即请求数据，生成遮罩，离开页面（deactivated）关闭遮罩

  deactivated() {
    // 离开页面触发
    this.listLoading = false // 离开页面关闭遮罩
    this.activatedStatus = 1
  },
  activated() {
    // 使用keep-alive时才会生效，在进入页面时触发
    if (!this.data.length) {
      // 进入页面判断是否有数据，没有数据发起请求
      this.getList()
    }
  }

使用keep-alive可以方便使用这两个钩子函数，减少mounted等钩子的使用，方便页面切换。