Vue 生命周期

Vue 生命周期图示

Vue 生命周期使用

我们可以直接在 Setup 方法中访问所有生命周期钩子，除了 beforeCreate 和 created 。

因为 Vue3 中 Setup 方法代替了这一系列初始化步骤，它是整个组件的入口。

<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

onBeforeMount(() => {
    console.log('组件挂载前调用')
})

onMounted(() => {
    console.log('组件挂载时调用')
})

onBeforeUpdate(() => {
    console.log('数据更新时调用，发生在虚拟 DOM 打补丁之前')
})

onUpdated(() => {
    console.log('由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子')
})

onBeforeUnmount(() => {
    console.log('卸载组件实例前调用')
})

onUnmounted(() => {
    console.log('卸载组件实例后调用')
})

</script>