在 Vue2 中使用 UniApp 時，生命周期鉤子函數是一個重要的概念。它允許開發者在特定的時間點運行代碼，管理組件的生命周期。以下是 Vue2 中 UniApp 常用的生命周期鉤子函數總結：
1.?beforeCreate
- 說明: 組件實例剛被創建，此時數據觀測和事件配置尚未開始。
- 用途: 很少直接使用，通常用于初始化一些狀態，但在此時無法訪問?
data、computed?或?methods。
2.?created
4.?mounted
- 說明: 組件實例已經創建，數據觀測和事件配置已完成，可以訪問?
data、computed?和?methods。 - 用途: 通常在這里進行數據的初始化，發起異步請求（如 API 調用），或設置定時器等。
created() {console.log('組件實例已創建'); }3.?
beforeMount - 說明: 在掛載之前調用，相關的 DOM 尚未被渲染。
- 用途: 通常不需要在這里執行代碼，因為這個生命周期在組件的初次渲染前。
- 說明: 組件掛載到 DOM 上后調用，此時可以通過?
this.$el?訪問組件的根 DOM 元素。 - 用途: 適合進行一些 DOM 操作或發起需要依賴于 DOM 的異步請求。常用于選擇器、圖表等依賴于 DOM 的庫初始化。
mounted() {console.log('組件已掛載到 DOM');
}
5.?beforeUpdate
- 說明: 在數據更新后，DOM 仍然未更新時調用。
- 用途: 可以在這里對即將更新的狀態進行一些計算。
beforeUpdate() {console.log('數據即將更新');
}
6.?updated
- 說明: DOM 更新完成后調用。
- 用途: 通常用于在數據更新后需要進行 DOM 操作的場景。在這里依然可以為性能考慮避免不必要的操作。
updated() {console.log('DOM 已更新');
}
7.?beforeDestroy
- 說明: 在組件實例銷毀之前調用，可以訪問到實例（
this）。 - 用途: 進行清理工作，比如清除定時器、注銷事件監聽等，避免內存泄漏。
beforeDestroy() {console.log('組件即將被銷毀');
}
8.?destroyed
- 說明: 組件實例已經被銷毀，所有的事件監聽和子實例也會被清理。
- 用途: 在這里可以明確地執行一些后續處理，或記賬等。
destroyed() {console.log('組件已被銷毀');
}
9.?activated?和?deactivated
- 說明: 當?
<keep-alive>?組件的子組件被激活和停用時調用。 - 用途: 適用于需要處理緩存狀態的組件。
10.?errorCaptured
- 說明: 當子組件的錯誤被捕獲時會調用。
- 用途: 可用于錯誤處理，捕獲子組件的錯誤并進行日志記錄或判定布爾值以決定是否繼續捕獲。
errorCaptured(err, vm, info) {console.error('捕獲到錯誤:', err);return false; // 繼續傳播
}
總結
在 Vue2 的 UniApp 中，生命周期鉤子函數提供了一種方便的方式來管理組件的不同階段。通過合理地使用這些鉤子函數，可以有效地控制數據流、處理 DOM 操作、清理資源等，從而提高應用的性能和用戶體驗。開發者可以根據需要選擇合適的鉤子函數來滿足不同的業務需求，優化組件的行為。
