Vue2、Vue3 生命周期的變化

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

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

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

• 修改
  • destroyed 生命周期選項(xiàng)被重命名為 unmounted
  • beforeDestroy 生命周期選項(xiàng)被重命名為 beforeUnmount
• 新增
  • errorCaptured：在捕獲一個(gè)來(lái)自后代組件的錯(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ù)中通過(guò)this輕松訪(fǎng)問(wèn)到 data、computed 和 methods。

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

測(cè)試：

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ì)這樣，我們可以很簡(jiǎn)單的從箭頭函數(shù)的特性來(lái)進(jìn)行一波簡(jiǎn)單的解釋?zhuān)?br />我們?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)系的， 整體來(lái)看，變化不大，只是名字大部分上是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è)，說(shuō)實(shí)話(huà)我在平常業(yè)務(wù)開(kāi)發(fā)中還真沒(méi)怎么用過(guò)，不過(guò)秉承著寧可多學(xué)些也不錯(cuò)過(guò)的就記錄一下吧！

Vue2x

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

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

Vue3x

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

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

或者用駝峰命名法

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

以上就是一文詳解Vue選項(xiàng)式 API 的生命周期選項(xiàng)和組合式API的詳細(xì)內(nèi)容，更多關(guān)于Vue選項(xiàng)組合API生命周期的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論