vue的页面缓存方案以及组件通讯

本文探讨了在Vue项目中运用keep-alive组件进行页面缓存的方法及其利弊,同时介绍了如何利用Vuex解决组件间通讯难题,确保数据实时同步。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

对于一个后台管理系统:

一:做法为在App.vue中设置统一的缓存标签:<keep-alive></keep-alive>

1、这里的keep-alive会作用到全局,多部配置页面在多个页面切换可以回显数据,防止数据丢失

2、keep-alive缺点:每一个vue的页面生命周期只会执行一遍,即钩子函数只执行一遍,若有在钩子函数中需要实时同步后台数据的场景请谨慎使用,防止后台数据刷新但是前台页面展示不了。这里考虑后台管理系统在钩子函数中获取的数据都是一些固定不变的字典数据,且随时刷新页面重新加载页面,所以采用了keep-alive

二:组件通讯

一个父页面嵌套了多个子页面,子页面之间互相通讯需要通过父页面作为中转(好像也有其他方式,我不太确定),对于分步配置比较难受,这里采用vuex,实现组件间的直接通讯

1、vuex的缺点,使用 Vuex 可能是繁琐冗余的。繁琐是每次子页面打开都需要重写渲染数据。冗余是通过其他方式也可以实现(可能不准确,暂时只能这么理解)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值