Vue之刷新頁面會觸發的生命周期函數
刷新頁面時不會觸發組件的 onUnmount 事件。
因為刷新頁面會直接銷毀整個頁面的 DOM 樹和內存中的組件實例,屬于“強制清空”,而非組件正常從 DOM 樹中卸載的流程。
而 onUnmount 的核心是“組件正常卸載(如路由切換、條件渲染移除)時執行”,僅在組件主動脫離 DOM 樹的場景下觸發。
刷新頁面時觸發 Vue 函數,核心是抓“頁面刷新的生命周期節點”,常用 3 種場景化方案,直接適配不同需求:
1. 組件初始化時觸發:若函數需在刷新后組件掛載完成執行,直接把函數寫在 onMounted(Vue3)或 mounted(Vue2)中,刷新頁面會重新執行組件掛載,進而觸發函數。
2. 頁面刷新前觸發:若需在刷新前執行(如保存數據),用瀏覽器 beforeunload (unload是卸載的意思)事件,在 onMounted 中注冊事件,刷新前會觸發綁定的函數(注意:部分瀏覽器對彈窗等操作有限制)。
3. 頁面刷新后(DOM 加載完成)觸發:若需等頁面所有資源加載完再執行,可在 onMounted 中注冊瀏覽器 load 事件,確保刷新后頁面資源就緒再觸發函數。

浙公網安備 33010602011771號