vue两种常见缓存策略的数据交互处理方案


声明:本文转载自https://my.oschina.net/yangyishe/blog/3122228,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

插播一条广告→2021 ByteDance字节跳动内推←各城市、各方向的岗位都有,大量招人!


1 缓存形式说明

vue常使用的两种缓存策略,一种为vue的router中使用keep-alive,一种为使用vuex的store.两者对比见表格:

缓存策略 router中使用keep-alive vuex的store
用法 个人博客 官方博客
优点 1.比较灵活;<br>2.基本不需学习 1.方便统一管理数据;<br>2.多个router之间传输数据十分方便;
缺点 1.多个router之间数据传输较困难;<br>2.统一管理数据困难且效率低; 1.页面内部与input等内容交互时不方便,像v-model这样的语法糖需要拆开;<br>2.需要一定的学习过程和良好的设计理念;
适用场合 刚开始使用vue的新手(只需配置即可) 更高效管理通用数据的情况;<br>建议通过模块化使vuex的耦合性降到最低;

3 数据交互处理

以部门模块和需要选择部门的用户模块为例进行说明.

此处的数据交互问题包含两个问题:

  1. 在本地操作,当前模块的数据改变时(如增加部门),影响到另一模块的数据引用(此时再增加用户时选择的部门,如果只是单纯被缓存,则不会体现这种变化);
  2. 在本地操作,当前模块的数据改变时,影响另一个地点的数据引用;

问题二情景的自主实现必然需要后台的支持,更加复杂,本博客不予考虑.一般而言,这种情况建议用户直接刷新页面来解决问题二;
对于问题一,理论上可以仅通过前台实现自主产生影响,这里分别讲下两种缓存策略如何实现这种自主影响.

3.1 keep-alive缓存策略

由于keep-alive对于数据统一管理的不便性,难以有效率的查询出被影响模块的数据引用.且即使找出了被影响模块,也难以使用有效方法重新读取缓存数据.
基于此,可考虑将所有可能被影响到的数据在切换router时,均重新加载.

activated(){
    //这里仅重新加载可能会被影响的数据
    //reload code
},

这样会牺牲一定的效率,但除了时间,对于用户使用而言,并没有太不好的影响.

3.2 vuex的store数据管理

由于vuex的store内部数据都是相互交通,统一管理的,因此既容易检测到数据变化(数据变化需要经过mutations),也容易对被影响数据进行重新加载(有些场合甚至不需重新加载,即使加载也仅需加载一遍).

以此来看,vuex的store在处理数据交互问题上十分优秀.

本文发表于2019年10月28日 11:00
(c)注:本文转载自https://my.oschina.net/yangyishe/blog/3122228,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1327 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1