Vue選項(xiàng)式API的生命周期選項(xiàng)和組合式API源碼分析

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

Vue2、Vue3 生命周期的變化

選項(xiàng)式 API 的生命周期選項(xiàng)的變化

這里我們會(huì)發(fā)現(xiàn)Vue3對(duì)Vue2的生命周期鉤子似乎沒有做大的調(diào)整

• 修改

• destroyed 生命周期選項(xiàng)被重命名為 unmounted

• beforeDestroy 生命周期選項(xiàng)被重命名為 beforeUnmount

• 新增

• errorCaptured：在捕獲一個(gè)來自后代組件的錯(cuò)誤時(shí)被調(diào)用。

• renderTracked：跟蹤虛擬 DOM 重新渲染時(shí)調(diào)用。

• renderTriggered：當(dāng)虛擬 DOM 重新渲染被觸發(fā)時(shí)調(diào)用。

小知識(shí)

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

那么我有個(gè)大膽的想法！就是用箭頭函數(shù)進(jìn)行定義生命周期鉤子函數(shù)，可以如期的訪問到我們想要的實(shí)例嗎？

測試：

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實(shí)例。

至于為什么會(huì)這樣，我們可以很簡單的從箭頭函數(shù)的特性來進(jìn)行一波簡單的解釋：
我們?cè)诙x箭頭函數(shù)的時(shí)候，定義初就綁定了父級(jí)上下文，因?yàn)榧^函數(shù)綁定了父級(jí)上下文，所以 this 不會(huì)指向預(yù)期的組件實(shí)例，并且this.data、this.addToCart 都將會(huì)是 undefined。

組合式 生命周期選項(xiàng) API

選項(xiàng)式 API 的生命周期選項(xiàng)和組合式 API 之間是有映射關(guān)系的， 整體來看，變化不大，只是名字大部分上是on${選項(xiàng)式 API 的生命周期選項(xiàng)}

• 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 的生命周期的時(shí)候，發(fā)現(xiàn)了這個(gè)，說實(shí)話我在平常業(yè)務(wù)開發(fā)中還真沒怎么用過，不過秉承著寧可多學(xué)些也不錯(cuò)過的就記錄一下吧！

Vue2x

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

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

Vue3x

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

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

或者用駝峰命名法

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

讀到這里，這篇“Vue選項(xiàng)式API的生命周期選項(xiàng)和組合式API源碼分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。