這里基于組合式 API的生命周期與vue2中的生命周期對(duì)比：
對(duì)比圖(常用)
| vue2.x | vue3.x |
|---|---|
| beforeCreate | setup |
| created | setup |
| beforeMount | onBeforeMount |
| mounted | onMounted |
| beforeUpdate | onBeforeUpdate |
| updated | onUpdated |
| beforeDestroy | onBeforeUnmount |
| destroyed | onUnmounted |
| activated | onActivated |
| deactivated | onDeactivated |
含義
- onBeforeMount：在組件被掛載之前被調(diào)用
- onMounted：在組件掛載完成后執(zhí)行
- onBeforeUpdate：在組件即將因?yàn)轫憫?yīng)式狀態(tài)變更而更新其 DOM 樹之前調(diào)用
- onUpdated：在組件因?yàn)轫憫?yīng)式狀態(tài)變更而更新其 DOM 樹之后調(diào)用
- onBeforeUnmount：在組件實(shí)例被卸載之前調(diào)用
- onUnmounted：在組件實(shí)例被卸載之后調(diào)用
- onActivated：組件實(shí)例是keep-alive緩存樹的一部分，當(dāng)組件被插入到 DOM 中時(shí)調(diào)用
- onDeactivated：組件實(shí)例是keep-alive緩存樹的一部分，當(dāng)組件從 DOM 中移除時(shí)調(diào)用
使用
<script setup>
// script標(biāo)簽上面的setup就代表了setup這個(gè)生命周期
import { onMounted, ... } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
圖示
生命周期圖示
