生命周期 - Vue3

通過生命周期，我們可以在合適的適合執(zhí)行自己需要的操作。

選項(xiàng)式API

組合式API映射

下表為 Options API 和 Composition API 之間的映射，包含如何在 setup () 內(nèi)部調(diào)用生命周期鉤子：

Options API（選項(xiàng)式 API ）	變化	Composition API（組合式 API ）
beforeCreate	→	setup()
created	→	setup()
beforeMount	→	onBeforeMount
mounted	→	onMounted
beforeUpdate	→	onBeforeUpdate
updated	→	onUpdated
beforeDestroy	→	onBeforeUnmount
destroyed	→	onUnmounted
errorCaptured	→	onErrorCaptured

因?yàn)?setup 是圍繞 beforeCreate 和 created 生命周期鉤子運(yùn)行的，所以不需要顯式地定義它們。換句話說，在這些鉤子中編寫的任何代碼都應(yīng)該直接在 setup 函數(shù)中編寫。

這些函數(shù)接受一個(gè)回調(diào)函數(shù)，當(dāng)鉤子被組件調(diào)用時(shí)將會(huì)被執(zhí)行:

setup() {
...
    // 組件被掛載時(shí)，我們用 onMounted 鉤子記錄一些消息
    onMounted(() => console.log('component mounted!'));
...
}

setup

setup()在創(chuàng)建組件之前執(zhí)行。

• setup相當(dāng)于之前的created周期：創(chuàng)建時(shí)
• onBeforeMount：DOM即將掛載
• onMounted：DOM掛載完畢
• onBeforeUpdate：DOM即將更新
• onUpdated：DOM更新完畢
• onBeforeUnmount：即將銷毀
• onUnmounted：銷毀完畢

使用方法

 setup () {
    onBeforeMount(() => {
      console.log("DOM即將掛載");
    })
    onMounted(() => {
      console.log("DOM掛載完畢");
    })
    // onBeforeUpdate(() => {})    DOM即將更新
    // onUpdated(() => {})   DOM更新完畢
    // onBeforeUnmount(() => {})   即將銷毀
    // onUnmounted(() => {})   銷毀完畢
     

    return {}
  }

用法一：若您和我一樣，為了練習(xí)，您可以在setup中，通過給方法添加Vue.來使用該方法

Vue.onMounted(() => console.log('我是onMounted'));

方法二：若您在項(xiàng)目中開發(fā)，可直接使用，無需添加Vue.

onMounted(() => console.log('我是onMounted'));

參考文章

• Vue3 組合式 API
• vue基礎(chǔ) - 24 （vue3 生命周期
• Vue3.x中的生命周期和鉤子函數(shù)（部分）