vue中keep-alive

介绍

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和<transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 在 2.2.0 及其更高版本中，activated 和 deactivated 将会在 <keep-alive> 树内的所有嵌套组件中触发。 主要用于保留组件状态或避免重新渲染.

使用

• include - string | RegExp | Array。只有名称匹配的组件会被缓存。
• exclude - string | RegExp | Array。任何名称匹配的组件都不会被缓存。

<keep-alive include="a,b"或:include="/a|b/"或:include="['a', 'b']">//include和exclude使用方法一样
<template></template>
</keep-alive>

• max - number | string。最多可以缓存多少组件实例。

最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。

<keep-alive :max="10">
</keep-alive>

1. 缓存整个页面或组件

 <keep-alive>
    <component>
      <!-- 组件将被缓存 -->
    </component>
</keep-alive>
.....
<keep-alive>
    <router-view></router-view>
</keep-alive>

2. 缓存部分页面或者组件
   • 使用router.meta属性

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

//keepAlive：这个路由是否需要缓存
routes: [
  { path: '/', redirect: '/index',  component: Index, mate: { keepAlive: true }},
  {
    path: '/common',
    component: TestParent,
    children: [
      { path: '/test2', component: Test2, mate: { keepAlive: true } } 
    ]
  }

keep-alive生命周期

1. activated
 
      在 keep-alive 组件激活时调用
      该钩子函数在服务器端渲染期间不被调用

2. deactivated
  
      在 keep-alive 组件停用时调用
      该钩子在服务器端渲染期间不被调用

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

注意： 只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用。

正常生命周期：beforeRouteEnter --> created --> mounted --> updated–>destroyed
使用keepAlive后生命周期： 首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter --> activated --> deactivated

注： 1. 这里的activated非常有用，因为页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成(下面会举个栗子：列表页回到上次浏览位置)
2. activated keep-alive组件激活时调用，该钩子在服务器端渲染期间不被调用。
3. deactivated keep-alive组件停用时调用，该钩子在服务端渲染期间不被调用。