<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。
<keep-alive>https://m.qb5200.com/包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和https://m.qb5200.com/<transition>https://m.qb5200.com/相似，<keep-alive>https://m.qb5200.com/是一个抽象组件：它自身不会渲染一个https://m.qb5200.com/DOMhttps://m.qb5200.com/元素，也不会出现在父组件链中。
prop:
在2.1.0版本Vue中
常见用法：
//https://m.qb5200.com/组件
exporthttps://m.qb5200.comhttps://img.qb5200.com/download-x/defaulthttps://m.qb5200.com/{
https://m.qb5200.com/name:https://m.qb5200.com/'test-keep-alive',
https://m.qb5200.comhttps://img.qb5200.com/download-x/datahttps://m.qb5200.com/()https://m.qb5200.com/{
https://m.qb5200.com/returnhttps://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/includedComponents:https://m.qb5200.com/"test-keep-alive"
https://m.qb5200.com/}
https://m.qb5200.com/}
}
<keep-alivehttps://m.qb5200.com/include="test-keep-alive"> https://m.qb5200.com/<!--https://m.qb5200.com/将缓存name为test-keep-alive的组件https://m.qb5200.com/--> https://m.qb5200.com/<component></component> </keep-alive> <keep-alivehttps://m.qb5200.com/include="a,b"> https://m.qb5200.com/<!--https://m.qb5200.com/将缓存name为a或者b的组件，结合动态组件使用https://m.qb5200.com/--> https://m.qb5200.com/<componenthttps://m.qb5200.com/:is="view"></component> </keep-alive> <!--https://m.qb5200.com/使用正则表达式，需使用v-bindhttps://m.qb5200.com/--> <keep-alivehttps://m.qb5200.com/:include="/a|b/"> https://m.qb5200.com/<componenthttps://m.qb5200.com/:is="view"></component> </keep-alive> <!--https://m.qb5200.com/动态判断https://m.qb5200.com/--> <keep-alivehttps://m.qb5200.com/:include="includedComponents"> https://m.qb5200.com/<router-view></router-view> </keep-alive> <keep-alivehttps://m.qb5200.com/exclude="test-keep-alive"> https://m.qb5200.com/<!--https://m.qb5200.com/将不缓存name为test-keep-alive的组件https://m.qb5200.com/--> https://m.qb5200.com/<component></component> </keep-alive>
结合router，缓存部分页面
使用$route.meta的keepAlive属性：
<keep-alive> https://m.qb5200.com/<router-viewhttps://m.qb5200.com/v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-viewhttps://m.qb5200.com/v-if="!$route.meta.keepAlive"></router-view>
需要在router中设置router的元信息meta：
//...router.js
exporthttps://m.qb5200.comhttps://img.qb5200.com/download-x/defaulthttps://m.qb5200.com/newhttps://m.qb5200.com/Router({
https://m.qb5200.com/routes:https://m.qb5200.com/[
https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/path:https://m.qb5200.com/'/',
https://m.qb5200.com/https://m.qb5200.com/name:https://m.qb5200.com/'Hello',
https://m.qb5200.com/https://m.qb5200.com/component:https://m.qb5200.com/Hello,
https://m.qb5200.com/https://m.qb5200.com/meta:https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/falsehttps://m.qb5200.com///https://m.qb5200.com/不需要缓存
https://m.qb5200.com/https://m.qb5200.com/}
https://m.qb5200.com/},
https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/path:https://m.qb5200.com/'/page1',
https://m.qb5200.com/https://m.qb5200.com/name:https://m.qb5200.com/'Page1',
https://m.qb5200.com/https://m.qb5200.com/component:https://m.qb5200.com/Page1,
https://m.qb5200.com/https://m.qb5200.com/meta:https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/truehttps://m.qb5200.com///https://m.qb5200.com/需要被缓存
https://m.qb5200.com/https://m.qb5200.com/}
https://m.qb5200.com/}
https://m.qb5200.com/]
})
使用效果
以上面router的代码为例：
<!--https://m.qb5200.com/Page1页面https://m.qb5200.com/-->
<template>
https://m.qb5200.com/<divhttps://m.qb5200.com/class="hello">
https://m.qb5200.com/<h1>Vue</h1>
https://m.qb5200.com/<h2>{{msg}}</h2>
https://m.qb5200.com/<inputhttps://m.qb5200.com/placeholder="输入框"></input>
https://m.qb5200.com/</div>
</template>
<!--https://m.qb5200.com/Hello页面https://m.qb5200.com/-->
<template>
https://m.qb5200.com/<divhttps://m.qb5200.com/class="hello">
https://m.qb5200.com/<h1>{{msg}}</h1>
https://m.qb5200.com/</div>
</template>
(1)https://m.qb5200.com/在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；
(2)https://m.qb5200.com/回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；
https://m.qb5200.com/图1https://m.qb5200.com/进入Page1页面，并输入"asd"
https://m.qb5200.com/图2https://m.qb5200.com/跳转到Hello
https://m.qb5200.com/图3https://m.qb5200.com/返回Page1页面，输入框数据会被保留
当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，
借鉴一下
思路是在每个路由的beforeRouteLeave(to,https://m.qb5200.com/from,https://m.qb5200.com/next)钩子中设置to.meta.keepAlive：
A的路由：
{
https://m.qb5200.com/path:https://m.qb5200.com/'/',
https://m.qb5200.com/name:https://m.qb5200.com/'A',
https://m.qb5200.com/component:https://m.qb5200.com/A,
https://m.qb5200.com/meta:https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/truehttps://m.qb5200.com///https://m.qb5200.com/需要被缓存
https://m.qb5200.com/}
}
exporthttps://m.qb5200.comhttps://img.qb5200.com/download-x/defaulthttps://m.qb5200.com/{
https://m.qb5200.comhttps://img.qb5200.com/download-x/data()https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/returnhttps://m.qb5200.com/{};
https://m.qb5200.com/},
https://m.qb5200.com/methods:https://m.qb5200.com/{},
https://m.qb5200.com/beforeRouteLeave(to,https://m.qb5200.com/from,https://m.qb5200.com/next)https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/https://m.qb5200.com///https://m.qb5200.com/设置下一个路由的https://m.qb5200.com/meta
https://m.qb5200.com/https://m.qb5200.com/to.meta.keepAlivehttps://m.qb5200.com/=https://m.qb5200.com/true;https://m.qb5200.com///https://m.qb5200.com/Bhttps://m.qb5200.com/跳转到https://m.qb5200.com/Ahttps://m.qb5200.com/时，让https://m.qb5200.com/Ahttps://m.qb5200.com/缓存，即不刷新
https://m.qb5200.com/https://m.qb5200.com/next();
https://m.qb5200.com/}
};
exporthttps://m.qb5200.comhttps://img.qb5200.com/download-x/defaulthttps://m.qb5200.com/{
https://m.qb5200.comhttps://img.qb5200.com/download-x/data()https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com/returnhttps://m.qb5200.com/{};
https://m.qb5200.com/},
https://m.qb5200.com/methods:https://m.qb5200.com/{},
https://m.qb5200.com/beforeRouteLeave(to,https://m.qb5200.com/from,https://m.qb5200.com/next)https://m.qb5200.com/{
https://m.qb5200.com/https://m.qb5200.com///https://m.qb5200.com/设置下一个路由的https://m.qb5200.com/meta
https://m.qb5200.com/https://m.qb5200.com/to.meta.keepAlivehttps://m.qb5200.com/=https://m.qb5200.com/false;https://m.qb5200.com///https://m.qb5200.com/Chttps://m.qb5200.com/跳转到https://m.qb5200.com/Ahttps://m.qb5200.com/时让https://m.qb5200.com/Ahttps://m.qb5200.com/不缓存，即刷新
https://m.qb5200.com/https://m.qb5200.com/next();
https://m.qb5200.com/}
};
亲测有效哦~
keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。
