一、简介
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>