一文詳解Vue選項式 API 的生命周期選項和組合式API

Posted on by

Vue2、Vue3 生命周期的變化

正好在看Vue的官方文檔，也正好比對一下，做一下筆記

選項式 API 的生命周期選項的變化

Vue2.x Vue3
beforeCreate beforeCreate
created created
beforeMount beforeMount
mounted mounted
beforeUpdate beforeUpdate
updated updated
beforeDestroy beforeUnmount
destroyed unmounted
新增
errorCaptured
renderTracked
renderTriggered

這裡我們會發現Vue3對Vue2的生命周期鉤子似乎沒有做大的調整

  • 修改
    • destroyed 生命周期選項被重命名為 unmounted
    • beforeDestroy 生命周期選項被重命名為 beforeUnmount
  • 新增
    • errorCaptured：在捕獲一個來自後代組件的錯誤時被調用。
    • renderTracked：跟蹤虛擬 DOM 重新渲染時調用。
    • renderTriggered：當虛擬 DOM 重新渲染被觸發時調用。

小知識

所有生命周期鉤子的 this 上下文將自動綁定至當前的實例中，所以我們可以在 鉤子函數中通過this輕松訪問到 data、computed 和 methods。

那麼我有個大膽的想法！就是用箭頭函數進行定義生命周期鉤子函數，可以如期的訪問到我們想要的實例嗎？

測試：

const app = Vue.createApp({
  data() {
    return {
      cart: 0
   }
},
mounted: () => { console.log(this.cart) },
  methods: {
    addToCart() {
      this.cart += 1
    }
  }
})

app.mount("#app");

不出所望的undefined瞭，我們打印一下this

指向的上下文是window並不是我們的Vue實例。

至於為什麼會這樣，我們可以很簡單的從箭頭函數的特性來進行一波簡單的解釋：
我們在定義箭頭函數的時候，定義初就綁定瞭父級上下文，因為箭頭函數綁定瞭父級上下文，所以 this 不會指向預期的組件實例，並且this.data、this.addToCart 都將會是 undefined。

組合式 生命周期選項 API

選項式 API 的生命周期選項和組合式 API 之間是有映射關系的， 整體來看，變化不大，隻是名字大部分上是on${選項式 API 的生命周期選項}

  • beforeCreate -> 使用 setup()
  • created -> 使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeUnmount -> onBeforeUnmount
  • unmounted -> onUnmounted
  • errorCaptured -> onErrorCaptured
  • renderTracked -> onRenderTracked
  • renderTriggered -> onRenderTriggered
  • activated -> onActivated
  • deactivated -> onDeactivated

參考：組合式 API 生命周期鉤子

使用：

export default {
  setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
  }
}

VNode 生命周期事件

在查閱 Vue 的生命周期的時候，發現瞭這個，說實話我在平常業務開發中還真沒怎麼用過，不過秉承著寧可多學些也不錯過的就記錄一下吧！

Vue2x

在Vue2版本中，如果我們想要監聽組件內的生命周期的階段。我們可以通過 hook:${組件生命周期鉤子名稱}來進行組件內部的事件監聽。

<template>
  <child-component @hook:updated="onUpdated">
</template>

Vue3x

在 Vue 3 中，如果我們想要監聽組件內的生命周期的階段。我們可以通過 vnode-${組件生命周期鉤子名稱}來進行組件內部的事件監聽。額外地，這些事件現在也可用於 HTML 元素，和在組件上的用法一樣。

<template>
  <child-component @vnode-updated="onUpdated">
</template>

或者用駝峰命名法

<template>
  <child-component @vnodeUpdated="onUpdated">
</template>

以上就是一文詳解Vue選項式 API 的生命周期選項和組合式API的詳細內容，更多關於Vue選項組合API生命周期的資料請關註WalkonNet其它相關文章！

推薦閱讀：