[转] Vue生命周期

全栈程序员-站长 • 2022年3月2日下午5:00 • 未分类 • 阅读 40

大家好，又见面了，我是全栈君。

Vue生命周期

[转] Vue生命周期

这是Vue文档里关于实例生命周期的解释图

那么下面我们来进行测试一下

<section id="app-8">
    {
   
   {data}}
</section>

var myVue=new Vue({
        el:"#app-8",
        data:{
            data:"aaaaa",
            info:"nono"
        },
        beforeCreate:function(){
            console.log("创建前========")
            console.log(this.data)
            console.log(this.$el)
        },
        created:function(){
            console.log("已创建========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeMount:function(){
            console.log("mount之前========")
            console.log(this.info)
            console.log(this.$el)
        },
        mounted:function(){
            console.log("mounted========")
            console.log(this.info)
            console.log(this.$el)
        },
        beforeUpdate:function(){
            console.log("更新前========");

        },
        updated:function(){
            console.log("更新完成========");
        },
        beforeDestroy:function(){
            console.log("销毁前========")
            console.log(this.info)
            console.log(this.$el)
        },
        destroyed:function(){
            console.log("已销毁========")
            console.log(this.info)
            console.log(this.$el)
        }
    })

代码如上，浏览器开始加载文件

[转] Vue生命周期