亲宝软件园·资讯

展开

Vue keep-alive Vue keep-alive实践总结(推荐)

HanYif 人气:0
想了解Vue keep-alive实践总结(推荐)的相关内容吗,HanYif在本文为您仔细讲解Vue keep-alive的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:vue,keep,alive,下面大家一起来学习吧。

<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.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/name:https://m.qb5200.com/'test-keep-alive', https://m.qb5200.com/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.com/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.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/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.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/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钩子中获取数据的任务。

加载全部内容

相关教程
猜你喜欢
用户评论