前端页面缓存问题

目录

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 缓存的组件失活时调用