这里基于组合式 API的生命周期与vue2中的生命周期对比：
对比图(常用)
| 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：在组件被挂载之前被调用
- onMounted：在组件挂载完成后执行
- onBeforeUpdate：在组件即将因为响应式状态变更而更新其 DOM 树之前调用
- onUpdated：在组件因为响应式状态变更而更新其 DOM 树之后调用
- onBeforeUnmount：在组件实例被卸载之前调用
- onUnmounted：在组件实例被卸载之后调用
- onActivated：组件实例是keep-alive缓存树的一部分，当组件被插入到 DOM 中时调用
- onDeactivated：组件实例是keep-alive缓存树的一部分，当组件从 DOM 中移除时调用
使用
<script setup>
// script标签上面的setup就代表了setup这个生命周期
import { onMounted, ... } from 'vue'
onMounted(() => {
console.log(`the component is now mounted.`)
})
</script>
图示
生命周期图示
