刷新页面时不会触发组件的 onUnmount 事件。
因为刷新页面会直接销毁整个页面的 DOM 树和内存中的组件实例,属于“强制清空”,而非组件正常从 DOM 树中卸载的流程。
而 onUnmount 的核心是“组件正常卸载(如路由切换、条件渲染移除)时执行”,仅在组件主动脱离 DOM 树的场景下触发。
刷新页面时触发 Vue 函数,核心是抓“页面刷新的生命周期节点”,常用 3 种场景化方案,直接适配不同需求:
1. 组件初始化时触发:若函数需在刷新后组件挂载完成执行,直接把函数写在 onMounted(Vue3)或 mounted(Vue2)中,刷新页面会重新执行组件挂载,进而触发函数。
2. 页面刷新前触发:若需在刷新前执行(如保存数据),用浏览器 beforeunload (unload是卸载的意思)事件,在 onMounted 中注册事件,刷新前会触发绑定的函数(注意:部分浏览器对弹窗等操作有限制)。
3. 页面刷新后(DOM 加载完成)触发:若需等页面所有资源加载完再执行,可在 onMounted 中注册浏览器 load 事件,确保刷新后页面资源就绪再触发函数。