理解vue3组件的生命周期

程序员小张 • 2025-02-13 12:08:39 • 阅读:238

组件的生命周期可以这么理解：一个组件从初始化到最终的销毁完整过程。Vue.js组件的生命周期给予我们多个关键钩子来介入和定制组件的行为。理解组件的生命周期在开发中非常重要。

组件生命周期钩子：

挂载：组件第一次渲染到页面上，包含 onBeforeMount 和 onMounted。

更新：当组件的数据发生变化时，会触发更新阶段。在此阶段，组件会根据新的数据重新渲染。包含onBeforeUpdate和onUpdated。

卸载：当组件从 DOM 中移除时进入此阶段。包含onBeforeUnmount和onUnmounted。在这一阶段，组件将清理它自己，例如通过v-if方法来判断是否显示该组件。

看下具体的栗子吧：

准备好2个组件：news跟about两个组件。

在News.vue文件中列出组件的生命钩子，在适当的时候触发他们。

<template>

    <div style="color:#333">{{ isshow }}</div>

    <a-button type="primary" @click="changeData">点我</a-button>

</template>

<script setup>

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

    import { reactive,ref } from 'vue';

    const isshow = ref(true)

    const changeData = ()=>{
        if(isshow.value){
            isshow.value=false;
        }else{
            isshow.value=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');
    })


</script>

<style scoped>

</style>

打开页面的时候就触发了onBeforeMount和onMounted方法，在控制台可以看到输出：