Vue--生命周期-CSDN博客

本文链接：https://blog.csdn.net/weixin_47231472/article/details/122883396

本文详细介绍了Vue组件的生命周期，包括创建、运行和销毁三个阶段的各个钩子函数，如beforeCreate、created、beforeMount、mounted等，并通过实例展示了它们在实际应用中的用法。通过理解这些生命周期，开发者可以更好地掌握Vue组件的状态管理和更新时机。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue 生命周期

生命周期：vue组件从创建到销毁的一系列过程

vue的生命周期分为三大阶段：

创建阶段（4）运行阶段（2）销毁阶段（2）

每个阶段都有对应的函数，叫做钩子，又被称为钩子函数。

生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期

HTML :

<div id="app">
    
    {{msg}}
</div>

JS :

//创建Vue实例,得到 ViewModel
new Vue({
    // el:"#app",
    data:{
        msg:"123"
    },
    methods:{
        getDate(){
            setTimeout(() => {
                this.msg = "hello 2022"
            },1000);
        }
    },
    //这里是第1个生命周期钩子，vue实例刚被创建出来，还是一个空的，会执行这个函数
    //【注意】此时 data 和 methods 还不能使用
    beforeCreate(){
        console.log(this.msg);//undefined
        //this.getDate();//报错
    },
    //这是第2个生命周期钩子，想要使用 data 和 methods ，最早可以在 created 中使用
    created(){
        console.log(this.msg);
        this.getDate()
    },
    //这是第3个生命周期钩子，模板已经在内存中编译好了，但是渲染到页面上，页面中的元素还没有被替换过来，只有一些模板字符串
    beforeMount(){
        console.log(document.getElementById("app").innerHTML);//{{msg}}
    }),
    //这是第4个生命周期钩子  内存的模板已经渲染到了页面上。
    //创建期间最后一个生命周期函数。当这个执行完成后，vue实例就已经完全创建好了。  
    // 此时，如果没有其他的操作，这个实例就静静地躺在我们的内存中。
    mounted() {
    console.log(document.getElementById("app").innerHTML); //{{msg}}
    },
 }).$mount("#app");

pp").innerHTML); //{{msg}}
},
}).$mount("#app");