Vue選項式API的生命周期選項和組合式API源碼分析

本文小編為大家詳細介紹“Vue選項式API的生命周期選項和組合式API源碼分析”，內容詳細，步驟清晰，細節處理妥當，希望這篇“Vue選項式API的生命周期選項和組合式API源碼分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

Vue2、Vue3 生命周期的變化

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

這里我們會發現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源碼分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。