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

2023-03-27 06:01:13

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生命週期的資料請關注it145.com其它相關文章！

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

目錄

Vue2、Vue3 生命週期的變化

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

小知識

組合式生命週期選項 API

VNode 生命週期事件

Vue2x

Vue3x

熱門文章

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

目錄

Vue2、Vue3 生命週期的變化

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

小知識

組合式 生命週期選項 API

VNode 生命週期事件

Vue2x

Vue3x

熱門文章

組合式生命週期選項 API