生命週期鉤子

每個 Vue 元件例項在建立時都會經歷一系列初始化步驟 - 例如，它需要設定資料觀察、編譯模板、將例項掛載到 DOM 上，以及當資料變化時更新 DOM。在這個過程中，它也會執行稱為生命週期鉤子的函式，使使用者有機會在特定階段新增自己的程式碼。

註冊生命週期鉤子

例如，onMountedmounted 鉤子可以用於在元件完成初始渲染並建立了 DOM 節點後執行程式碼

vue

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

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

還有其他在例項生命週期不同階段被呼叫的鉤子，其中最常用的是 onMounted, onUpdated, 和 onUnmounted.mounted, updated, 和 unmounted.

所有生命週期鉤子都是在其 this 上下文指向呼叫它的當前活動例項的情況下被呼叫的。注意這意味著您應該避免在宣告生命週期鉤子時使用箭頭函式，因為如果您這樣做，您將無法透過 this 訪問元件例項。

在呼叫 onMounted 時，Vue 自動將註冊的回撥函式與當前活動元件例項關聯起來。這要求這些鉤子在元件設定期間同步註冊。例如，不要這樣做

setTimeout(() => {
  onMounted(() => {
    // this won't work.
  })
}, 100)

請注意，這並不意味著呼叫必須放置在 setup() 或 <script setup> 的詞法內部。只要呼叫堆疊是同步的並且源自 setup() 內部，就可以在外部函式中呼叫 onMounted()。

以下是例項生命週期的圖示。您現在不需要完全理解所有正在發生的事情，但隨著您學習和構建更多內容，它將是一個有用的參考。

Component lifecycle diagram

請查閱生命週期鉤子API參考生命週期鉤子API參考以獲取所有生命週期鉤子及其相應用例的詳細資訊。