Vue生命周期

首页 > 代码库 > Vue生命周期

2024-08-30 13:44:07 223人阅读

技术分享

这是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)
        }
    })