Vue3的新特性(二)：生命周期

生命周期鈎子函數

vue3 更新了生命周期鈎子函數。
可以直接通過 import 對應的函數（例如：onMounted）來注冊生命周期鈎子函數。

Options API -> Hook inside setup

1. beforeCreate -> use setup()
2. created -> use setup()
3. beforeMount -> onBeforeMount
4. mounted -> onMounted
5. beforeUpdate -> onBeforeUpdate
6. updated -> onUpdated
7. beforeUnmount -> onBeforeUnmount
8. unmounted -> onUnmounted
9. errorCaptured -> onErrorCaptured
10. renderTracked -> onRenderTracked（調試用）
11. renderTriggered -> onRenderTriggered（調試用）

因為 setup 是在 beforeCreated 和 created 幾乎是同時進行的，所以可以將在這兩個生命周期里的代碼寫在 setup 里面。

使用：

import { onMounted, onUpdated, onUnmounted } from 'vue'
const MyComponent = {
  setup() {
    onMounted(() => {
      console.log('mounted!')
    })
    onUpdated(() => {
      console.log('updated!')
    })
    onUnmounted(() => {
      console.log('unmounted!')
    })
  }
}

更多內容參考 vue3