&

freeflydom

2023年6月2日 16:49 本文熱度 1468

每個 Vue 組件實例在創建時都需要經歷一系列的初始化步驟，比如設置好數據偵聽，編譯模板，掛載實例到 DOM，以及在數據改變時更新 DOM。在此過程中，它也會運行被稱為生命周期鉤子的函數，讓開發者有機會在特定階段運行自己的代碼。

注冊周期鉤子

舉例來說，mounted 鉤子可以用來在組件完成初始渲染并創建 DOM 節點后運行代碼：

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

還有其他一些鉤子，會在實例生命周期的不同階段被調用，最常用的是 mounted、updated 和 unmounted。

所有生命周期鉤子函數的 this 上下文都會自動指向當前調用它的組件實例。注意：避免用箭頭函數來定義生命周期鉤子，因為如果這樣的話你將無法在函數中通過 this 獲取組件實例。

下面是實例生命周期的圖表。你現在并不需要完全理解圖中的所有內容，但以后它將是一個有用的參考。

有關所有生命周期鉤子及其各自用例的詳細信息，請參考生命周期鉤子 API 索引。

該文章在 2023/6/3 10:37:18 編輯過

正在查詢...