如何在Vue3中使用生命週期鉤子函數

背景：4月16日，Vue 開發團隊終於在今天發佈了 3.0-beta.1 版本，也就是測試版。通常來說，從測試版到正式版，只會修復 bug，不會引入新功能，或者刪改老功能。所以，如果你對新版本非常感興趣，或者有新項目即將上馬，不妨嘗試一下新版本。

這是迎接Vue3.0系列文章的第三篇：

Vue2和Vue3中的生命週期鉤子函數非常相似——我們仍然可以訪問相同的鉤子函數，並且我們仍然可以將它們用於相同的案例。

但是，隨著 Composition API 的引入，我們訪問這些鉤子函數的方式已經改變，可以說是內涵不變，只是變了外表。

本文將告訴你Vue3中使用生命週期鉤子函數的新方法，如果你已經有Vue的經驗，那麼這將是一個非常容易的切換，只需導入鉤子函數並將它們包括在 setup 方法中即可。

什麼是Composition API？

Composition API 附帶了一個 setup() 方法，此方法封裝了我們的大多數組件代碼，並處理了響應式，生命週期鉤子函數等。

簡而言之，Composition API 使我們能夠更好地將代碼組織為更多的模塊化功能，而不是根據屬性的類型（data、computed）進行分離。

setup 方法會在在Vue2的 beforeCreate 鉤子函數之後和 created 的鉤子函數之前立即調用 。因此，我們不再需要這兩個鉤子，我們可以簡單地將代碼放在 setup() 方法中。

添加我們的生命週期鉤子

我們導入生命週期鉤子的方式是這樣的。

<code>import { onMounted, onUpdated, onUnmounted } from 'vue'/<code>

除 beforeCreate 和 created 之外，我們可以在 setup 方法中訪問9箇舊的生命週期鉤子

• onBeforeMount
• onMounted
• onBeforeUpdate
• onUpdated
• onBeforeUnmount
• onUnmounted
• onActivated
• onDeactivated
• onErrorCaptured

我們導入它們並在我們的代碼中訪問它們

<code>import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ... 
    })
    onMounted(() => {
      // ... 
    })
    onBeforeUpdate(() => {
      // ... 
    })
    onUpdated(() => {
      // ... 
    })
    onBeforeUnmount(() => {
      // ... 
    })
    onUnmounted(() => {
      // ... 
    })
    onActivated(() => {
      // ... 
    })
    onDeactivated(() => {
      // ... 
    })
    onErrorCaptured(() => {
      // ... 
    })
  }
}/<code>

從Vue2轉換到Vue3

這個方便的Vue2到Vue3的生命週期映射直接來自於 Vue3 Composition API 文檔，我認為這是一種最有用的方式來查看事情將如何變化，以及我們如何使用它們。

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

新的調試鉤子函數

們還可以在Vue3中使用兩個全新的鉤子函數來進行調試。他們是：

• onRenderTracked
• onRenderTriggered

這兩個事件都帶有一個DebuggerEvent，它使我們能夠知道是什麼導致了Vue實例中的重新渲染。

<code>export default {
  onRenderTriggered(e) {
    debugger
    // 檢查哪個依賴項導致組件重新呈現
  }
}/<code>

如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以

作者簡介：Web前端工程師，全棧開發工程師、持續學習者。

私信回覆：大禮包，送某網精品視頻課程網盤資料，準能為你節省不少錢！

閱讀更多 做工程師不做碼農 的文章

關鍵字: Composition 生命週期 onMounted