前端页面缓存问题
目录
1.问题说明
2.解决方案
3.vue3组合式api的生命周期函数说明
1.问题说明
vue3中，前端的路由对应的页面被<KeepAlive>包裹开启缓存时，从其他页面通过router.replace的方式跳转到开启缓存的页面，发现没有重新调用后端接口查询数据，而是直接查询缓存的数据，如何能重新查询数据
2.解决方案
方案1：
使用onActivated生命周期函数
当组件被<KeepAlive>包裹开启缓存时，vue3的生命周期函数onActivated和onDeactivated可以使用
onActivated 在以下情况下会被调用：
组件首次挂载时（如果它位于 <KeepAlive> 中）
组件从缓存中重新激活时（当切换回该组件时）
onDeactivated在以下情况会被调用
当切换到其他页面，当前页面会被停用，函数会被调用
方案2：
使用监听方式，在源页面进行跳转时，除了传递必要的参数，还传递的了时间戳
在源页面使用router方法跳转时，追加时间戳参数
router.push({path: "/kdb_tool/collocation/archive", query: {fileId: fileIdInfo.value, _t: Date.now()}})
在目标页面中监听时间戳的变化
watch(() => route.query._t,
async () => {
const info = route.query && route.query.fileId
// 将路由中的参数信息设置到表单中
form.value.fileId = info ? info as string : ''
await getData();
}) 如果时间戳变化了，代表又再一次进入目标页面，获取路由中的其他参数信息，然后执行查询处理
并且将监听函数immediate设置为false，监听器初始化时不执行监听器的处理逻辑，页面初始化时执行onmounted方法进行查询1
3.vue3组合式api的生命周期函数说明
组件初始化阶段
-
执行
setup()函数（此时可以注册生命周期钩子） -
在
setup()中注册的生命周期钩子会被记录下来
作用：组合式 API 的入口点，在组件创建之前执行
替代：替代了 beforeCreate 和 created 钩子
注意：setup本身并不是一个生命周期函数，在 setup() 中无法访问 this，因为此时组件实例尚未创建
挂载阶段
onBeforeMount（在 setup() 中注册的）
组件挂载（生成 DOM）
onMounted（在 setup() 中注册的）
-
onBeforeMount-
在组件挂载之前被调用
-
此时模板和渲染函数都已编译完成，但尚未生成真实 DOM
-
-
onMounted-
组件挂载完成后调用
-
可以安全地访问 DOM 元素
-
常用于执行需要 DOM 的操作或发送初始数据请求
-
更新阶段（当响应式数据变化时）
onBeforeUpdate
组件重新渲染
onUpdated
-
onBeforeUpdate-
在响应式数据变化且组件即将重新渲染时调用
-
可以在 DOM 更新前访问当前状态
-
-
onUpdated-
在组件因响应式数据变化而重新渲染后调用
-
可以操作更新后的 DOM
-
注意避免在此钩子中修改状态，可能导致无限循环
-
卸载阶段
onBeforeUnmount
组件卸载
onUnmounted
-
onBeforeUnmount-
在组件实例卸载之前调用
-
此时组件实例仍然完全可用
-
适合进行清理工作，如取消定时器、事件监听等
-
-
onUnmounted-
组件卸载后调用
-
所有指令都已解绑，事件监听器已移除
-
其他生命周期钩子
-
onActivated(KeepAlive 相关)-
被 KeepAlive 缓存的组件激活时调用
-
-
onDeactivated(KeepAlive 相关)-
被 KeepAlive 缓存的组件失活时调用
-