keep-alive及其生命周期钩子

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

作用：缓存组件内部状态，避免重新渲染

用法

keep-alive可以接收3个属性做为参数进行匹配对应的组件进行缓存:

• include包含的组件(可以为字符串，数组，以及正则表达式,只有匹配的组件会被缓存)
• exclude排除的组件(以为字符串，数组，以及正则表达式,任何匹配的组件都不会被缓存)
• max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)

// 只缓存组件name为a和b的组件
<keep-alive include="a,b"> 
  <component />
</keep-alive>

// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)
<keep-alive exclude="c"> 
  <component />
</keep-alive>

// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件
<keep-alive include="a,b" exclude="b"> 
  <component />
</keep-alive>

// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件
<keep-alive exclude="c" max="5"> 
  <component />
</keep-alive>

配合router使用

router-view也是一个组件，如果直接被包在keepalive里面，那么所有路径匹配到的视图组件都会被缓存,用法与缓存组件相同

• 使用 include/exclude
• 使用 meta 属性
  第一种方法：使用 include

//只有路径匹配到的 name 为 a 组件会被缓存
<keep-alive include="a">
    <router-view></router-view>
</keep-alive>

第一种方法：使用 meta 属性

// routes 配置文件
export default [
  {
    path: '/',
    name: 'home',
    component: Home,
    meta: {
      keepAlive: true // 需要被缓存
    }
  }, {
    path: '/user',
    name: 'user',
    component: User,
    meta: {
      keepAlive: false // 不需要被缓存
    }
  }
]

// App.vue
<keep-alive>
    <router-view v-if="$route.meta.keepAlive">
        <!-- 这里组件会被缓存，比如 Home！ -->
    </router-view>
</keep-alive>

<router-view v-if="!$route.meta.keepAlive">
    <!-- 这里组件不会被缓存，比如 User！ -->
</router-view>

keep-alive的生命周期

• 初次进入时：created > mounted > activated；退出后触发 deactivated
• 再次进入：会触发 activated；事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中