美文网首页
vue中缓存组件数据方案

vue中缓存组件数据方案

作者: 银票大王 | 来源:发表于2018-06-12 22:55 被阅读0次

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

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

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

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

组件缓存周期与时机钩子

待续

相关文章

  • vue中缓存组件数据方案

    想要缓存VUE组件数据,首选是使用自带的keep-alive组件,使用了该组件后,被该组件包裹的组件数据都会被缓存...

  • 用ES6、Nodejs语法,在vue中封装自己的JS模块

    今日学习笔记:封装一个设置缓存,获取缓存数据的JS模块 1、创建一个storage.js文件 2、在vue组件中,...

  • 移动webapp页面缓存方案

    参考资料 基于vue的移动web app页面缓存解决方案 vue-navigation插件的使用保存数据,根据数据...

  • vue父子组件传递数据方法

    标签(空格分隔): vue 父组件向子组件传递数据 Vue中父组件向子组件传递数据用props 举个例子 父组件中...

  • vue中动态路由组件缓存及生命周期函数

    vue动态路由组件缓存 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复...

  • vue2.0中keep-alive实践

    vue2.0中keep-alive实践 vue2.0提供了一个keep-alive组件,用来缓存组件,避免多次加载...

  • vue组件间通信

    vue组件间通信 1.父组件向子组件传递数据--props 在vue2.0中使用props实现向子组件传递数据: ...

  • vue性能优化

    在vue中,在做路由跳转时,我们通常希望去缓存那些活跃的动态组件,我们就会想到用keep-alive去缓存组件。但...

  • 缓存数据一致性

    读数据的标准姿势:先查缓存,如果缓存中数据不存在时读数据库,然后再将数据写回缓存。 相信这种读缓存方案争议较小...

  • vue-resource vue-axios传递数据

    使用vue-resource传递数据 在Home.vue组件中传送数据 src/model/Storage.js中...

网友评论

      本文标题:vue中缓存组件数据方案

      本文链接:https://www.haomeiwen.com/subject/spireftx.html