Vue生命周期对vue对象的影响

最新推荐文章于 2024-09-10 20:30:17 发布

原创最新推荐文章于 2024-09-10 20:30:17 发布 · 384 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web 专栏收录该内容

25 篇文章

订阅专栏

本文通过一个具体示例详细解析了Vue.js的生命周期钩子，包括各阶段的状态及内部数据的变化，并对比了this与Vue实例的区别。

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

在查找资料的时候看到了vue的生命周期图，然后拿下来一下，相关链接：
https://segmentfault.com/a/1190000008010666

这里写图片描述

链接里面解释了不同时期vue内部的数据情况，但是没有解释vue对象的生成情况，对于链接中的代码：

<script type="text/javascript">

    var app = new Vue({
        el: '#app',
        data: {
            message: "xuxiao is boy"
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //undefined
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined 
            console.log("%c%s", "color:red", "message: " + this.message)
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //undefined
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化 
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //undefined
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化  
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //undefined
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + app); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this); //已被初始化
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message)
        }
    })
</script>

其中的名字为app的vue对象，是在mounted状态之后才可用的，也就是说如果在beforeCreate、created、beforeMount、mounted这几个状态的时候使用app来访问数据或者调用方法，都是会报错的，因为app为空，但如何使用数据呢，这个时候就要用this了，this里面在created之后是有data值的，在这里也能看出来this和app还是有区别的