怎么在vue中实现一个keep-alive缓存功能

本篇文章为大家展示了怎么在vue中实现一个keep-alive缓存功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

<keep-alive>是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。

怎么在vue中实现一个keep-alive缓存功能

<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。和 <transition> 相似,<keep-alive> 是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。

prop:

  • include: 字符串或正则表达式。只有匹配的组件会被缓存。

  • exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。

Vue 实现组件信息的缓存

当我们在开发vue的项目过程中,避免不了在路由切换到其他的component再返回后该组件数据会重新加载,处理这种情况我们就需要用到keep-alive来缓存vue的组件信息,使其不再重新加载。

一、在app.vue里

<keep-alive>
<router-view></router-view>
</keep-alive>

但是这种情况会对所有的组件进行缓存,不能达到单个组件缓存的效果。

那么我们给部分组件加上,实现方法如下:

在app.vue

<!--这里是需要keepalive的-->
<keep-alive>
<router-viewv-if="$route.meta.keepAlive"></router-view>
<keep-alive>

<!--这里不会被keepAlive-->

<router-viewv-if="!$route.meta.keepAlive"></router-view>

二、 在路由的index.js页面里

{
path:'',
name:'',
component:'',
meta:{keepAlive:true}//这个是需要keepalive的
},
{
path:'',
name:'',
component:,
meta:{keepAlive:false}//这是不会被keepalive的
}

这就实现了部分组件的缓存功能

如果缓存的组件想要清空数据或者执行初始化方法,在加载组件的时候调用activated钩子函数,如下:

activated:function(){
this.data=‘'
}

上述内容就是怎么在vue中实现一个keep-alive缓存功能,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注恰卡编程网行业资讯频道。

发布于 2021-04-15 01:56:28
收藏
分享
海报
0 条评论
168
上一篇:怎么在Yii2.0框架中建立一个公共方法 下一篇:怎么在C++中使用内部类
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码