vue性能优化之keep-alive

一、简介

keep-alive是vue的内置组件
当我们使用keep-alive包裹动态组件时，会缓存不活动的组件实例
简而言之，就是将组件(页面)的相关数据和状态载入缓存，防止在页面切换的时候重复渲染DOM
更详细的介绍请参考vue的官方API文档

二、使用方法

在项目根组件中，如果我们用keep-alive包裹所有页面组件

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

在进入页面x时，将会触发x的 activated 生命周期钩子函数
在离开页面x时，将会触发x的 deactivated 生命周期钩子函数
同时，所有页面的 mounted 生命周期钩子函数都只会被执行一次

在2.1.0及更高版本中，可以通过include和exclude来选择需要进行缓存的组件
例如：当前项目路由配置了3个页面，页面组件名称分别为 A、B、C

// 只希望页面A被缓存
<template>
  <div id="app">
    <keep-alive include="A">
      <router-view/>
    </keep-alive>
  </div>
</template>

// 只希望页面C不被缓存
<template>
  <div id="app">
    <keep-alive exclude="C">
      <router-view/>
    </keep-alive>
  </div>
</template>