亲宝软件园·资讯

展开

Vue keep-alive实践总结（推荐）

HanYif 人气:1

<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:

    https://m.qb5200.com/https://m.qb5200.com/
  • include:https://m.qb5200.com/字符串或正则表达式。只有匹配的组件会被缓存。
    • https://m.qb5200.com/https://m.qb5200.com/
  • exclude:https://m.qb5200.com/字符串或正则表达式。任何匹配的组件都不会被缓存。

在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属性来实现其他需求，

借鉴一下vue-routerhttps://m.qb5200.com/之https://m.qb5200.com/keep-alive这篇博客中的例子：

    https://m.qb5200.com/https://m.qb5200.com/
  • 首页是A页面
    • https://m.qb5200.com/https://m.qb5200.com/
  • B页面跳转到A，A页面需要缓存
    • https://m.qb5200.com/https://m.qb5200.com/
  • C页面跳转到A，A页面不需要被缓存

思路是在每个路由的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钩子中获取数据的任务。

加载全部内容
相关教程
猜你喜欢
用户评论