keep-alive及其生命周期的使用

keep-alive说明

keep-alive的作用是缓存组件内部状态，避免重复渲染。

<keep-alive>标签不会渲染成一个dom元素。也不会出现在组件的父组件链中。

keep-alive的用法

keep-alive可以接收三个属性作为参数，匹配对应的组件进行缓存：

1. include：缓存指定组件。

2. exclude：不缓存指定组件。

3. 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也是一个组件，如果直接包含在keep-alive里面，那么所有路径中，符合匹配的都会被缓存。用法与缓存组件相同。

使用meta属性缓存路由

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

<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的生命周期

1. 当引入keep-alive 的时候，页面第一次进入，钩子函数的触发顺序：created ➡️ mounted ➡️ activated，退出当前页面时触发deactivated。再次进入此页面时，只触发activated。

2. 只要进入页面activated就会被触发，但是mounted不会重复触发。

3. 如果需要每次进入页面时，都执行一些方法，可以在最外层包裹一层<keep-alive>这样每次进入页面就会执行你想执行的方法，如果只需要执行一次，那么放在mounted中，不失为一种很好的选择。