Vue3生命周期

vue3 生命周期钩子

官方文档

下面总结下几个常用的生命周期钩子执行顺序

一 单个组件生命周期钩子执行顺序

<template>
   <div>{{num}}</div>
</template>

<script setup lang="ts">

import { 
    ref, watchEffect, 
    onBeforeMount, onMounted,
    onBeforeUpdate,onUpdated,
    onBeforeUnmount,onUnmounted
} from 'vue';

//--------------------------------
let num = ref(1);
setTimeout(() => {
    num.value += 1;
}, 500);
//--------------------------------
watchEffect(
    () => {
        let b = num.value;
        console.log('welcom组件--watchEffect');
    },
    {
        // flush: 'post'
        flush: 'pre' // 默认此配置
    }
);
//--------------------------------
onBeforeMount(() => {});

onMounted(() => {});

onBeforeUpdate(() => {});

onUpdated(() => {});

onBeforeUnmount(() => {});

onUnmounted(() => {});

</script>

二 父子组件生命周期钩子执行顺序