本文已整理到 Github，地址 ?? blog。

如果我的內容幫助到了您，歡迎點個 Star ?????? 鼓勵鼓勵 :) ~~

我希望我的內容可以幫助你?，F(xiàn)在我專注于前端領域，但我也將分享我在有限的時間內看到和感受到的東西。

Vue2 Options API 中的生命周期鉤子

以下是來自 Vue 2.x 文檔中生命周期鉤子的示意圖：

Vue2 實例的生命周期

每個主要的 Vue 生命周期事件都分為兩個鉤子，分別在該事件之前和之后分別調用。

主要的四個事件，八個主要鉤子如下：

• 創(chuàng)建 —— 在組件的創(chuàng)建上運行
• 掛載 —— 在掛載 DOM 時運行
• 更新 —— 修改反應性數(shù)據(jù)后運行
• 銷毀 —— 在元素被銷毀之前立即運行。

Vue 生命周期鉤子使您有機會在 Vue 對組件執(zhí)行特定操作時運行代碼。Vue 為每個組件公開的鉤子包括：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

上面的列表是有序的。因此，Vue 總是調在 created 之前調用 beforeCreate，反過來，Vue 在 beforeMount 之前調用 created。

例如：以下鉤子可用于在組件完成初始渲染并創(chuàng)建 DOM 節(jié)點后運行代碼：

export default {
  mounted() {
    console.log('組件現(xiàn)在已掛載。')
  }
}

Vue3 Composition API 中的生命周期鉤子

以下是來自 Vue3 新文檔中生命周期鉤子的示意圖：

Vue3 實例的生命周期

在 Composition API 中，我們必須先將生命周期鉤子導入我們的項目中，然后才能使用它們。這是為了使項目盡可能輕巧。

Composition API 不包括 beforeCreate 和 created（由 setup 方法本身代替），我們可以在 setup 方法中訪問 9 個生命周期鉤子

導入并使用它們：

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('mounted in the Composition API!')
    })
  }
}

Vue2 和 Vue3 的生命周期鉤子對比

除了上述介紹和一些命名上的變化，具體用法差不多。Vue3 還新增了用于調試和服務端渲染場景的鉤子：

• onRenderTracked — 調試鉤子，響應式依賴被收集時調用
• onRenderTriggered — 調試鉤子，響應式依賴被觸發(fā)時調用
• onServerPrefetch — 組件實例在服務器上被渲染前調用

詳細內容查閱新文檔 Composition API: Lifecycle Hooks。