Vue3组件的生命周期

vue3的生命周期如下下图所示：

Vue3.x与vue2.x生命周期对比，变化如下。

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured
• 新增的钩子函数

新增的钩子函数

组合式 API 还提供了以下调试钩子函数：

• onRenderTracked
• onRenderTriggered

实例：

定义子组件Child.vue

<template>
    <div>
        <h2>子组件Child</h2>
        <hr>
        <div v-if="isShow">
            我是子组件内容
        </div>
        <div>
            <button @click="hideChildContent">{{msg}}</button>
        </div>
    </div>
</template>

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

    export default defineComponent({
        name: 'Child',
        setup() {
            console.log('执行了setup()...');
            const msg = ref('隐藏')
            const isShow = ref(true);
            onBeforeMount(()=>{
                console.log('执行了onBeforeMount()...');
            })

            onMounted(()=>{
                console.log('执行了onMounted()...');
            })
            onBeforeUpdate(()=>{
                console.log('执行了onBeforeUpdate()...');
            })

            onUpdated(()=>{
                console.log('执行了onUpdated()...');
            })
            onBeforeUnmount(()=>{
                console.log('执行了onBeforeUnmount()...');
            })
            onUnmounted(()=>{
                console.log('执行了onUnmounted()...');
            })
            function hideChildContent() {
                if (isShow.value) {
                    msg.value = '显示';
                } else {
                    msg.value = '隐藏';
                }
                isShow.value = !isShow.value;
            }
            return {
                msg,
                isShow,
                hideChildContent
            }
        }
    });
</script>

定义父组件App.vue

<template>
    <h1>生命周期</h1>
    <hr>
    <button @click="hideChildComponent">{{btTitle}}</button>
    <Child v-if="showChild"></Child>
</template>

<script lang="ts">
    import {defineComponent, ref} from 'vue';
    import Child from "@/components/Child.vue";

    export default defineComponent({
        name: 'App',
        components: {
            Child,
        },
        setup() {
            const showChild = ref(true);
            const btTitle = ref('隐藏子组件');

            function hideChildComponent() {
                if (showChild.value) {
                    btTitle.value = '隐藏子组件';
                } else {
                    btTitle.value = '显示子组件';
                }
                showChild.value = !showChild.value;
            }
            return {
                showChild,
                btTitle,
                hideChildComponent
            }
        }
    });
</script>