vue中的生命周期一覽
通過生命周期，我們可以在合適的適合執行自己需要的操作。
選項式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'));