vue中缓存组件数据方案

想要缓存VUE组件数据,首选是使用自带的keep-alive组件,使用了该组件后,被该组件包裹的组件数据都会被缓存,组件仅会在初始加载时触发一次mounted及其之前的所有生命周期,而之后则会在activated 和 deactivated这两种事件状态切换,对这样的组件来说重点是在什么时机进行数据重置,一般会把数据获取更新方法放在activated事件中。

keep-alive有一个不方便的地方是,它的缓存是由VUE自动管理的,在需要的时候无法主动对缓存进行清除(在网上搜索过一些方法,主要是推荐用v-if进行组件重载,但测试后发现数据还是存在,而设置includes属性不够灵活)。

在开发项目的过程中发现,当组件是重用的公共组件时,keep-alive就无法满足使用场景了,因为当在不同ID的重用组件间切换时,甚至连activated 和 deactivated这两种事件都不会触发,而仅仅是路由发生了变化,这时候组件的数据就无法响应这种变化,无论怎么切换都只会保持初始的数据,因此需要新的缓存策略。

参考Vue Router文档的说明,在这种情况下,需要使用beforeRouteUpdate钩子来处理数据,基本策略如下图:

组件缓存周期与时机钩子

待续

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 文章首发于个人博客 前言 使用vue的时候经常会遇到一些问题,其实仔细阅读查阅官方文档,就会发现文档中已提到一些格...
    IOneStar阅读 4,973评论 1 28
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 7,542评论 0 25
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,260评论 4 129
  • 一:什么是闭包?闭包的用处? (1)闭包就是能够读取其他函数内部变量的函数。在本质上,闭包就 是将函数内部和函数外...
    xuguibin阅读 10,004评论 1 52
  • 周四早晨,我们没有看到时老师,我们城村小学一年级的13个孩子一起跟着菲儿老师读《春天的消息》: 风,摇绿了...
    云卷云舒1211阅读 225评论 4 3

友情链接更多精彩内容