生命周期 – Vue3

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

選項式API

組合式API映射

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

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

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

這些函數接受一個回調函數，當鉤子被組件調用時將會被執行:

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

setup

setup()在創建組件之前執行。

• setup相當于之前的created周期：創建時
• 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 {}
  }

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

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

方法二：若您在項目中開發，可直接使用，無需添加Vue.

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

參考文章

• Vue3 組合式 API
• vue基礎 – 24 （vue3 生命周期
• Vue3.x中的生命周期和鉤子函數（部分）