（4）Vue的生命周期详细过程

最新推荐文章于 2025-05-27 09:36:32 发布

緑水長流*z

最新推荐文章于 2025-05-27 09:36:32 发布

阅读量1.9k

点赞数 49

CC 4.0 BY-SA版权

分类专栏： # 【Vue3全栈开发系列】文章标签： vue.js vue生命周期 vue学习笔记 vue学习教程 vue生命周期的变化 vue javascript

緑水長流原创出品，未经许可禁止转载！

本文链接：https://blog.csdn.net/Bb15070047748/article/details/147350569

【Vue3全栈开发系列】专栏收录该内容

14 篇文章

订阅专栏

文章目录

第4章 Vue的生命周期详细过程

第4章 Vue的生命周期详细过程

4.1 Vue的生命周期简介

每个 Vue 实例在被创建之前都要经过一系列的初始化过程.

vue在生命周期中共有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destroyed8个状态；

4.2 Vue的生命周期钩子

4.2.1 beforeCreate/created

beforeCreate：Vue生命周期的第一个函数，在Vue对象创建之前执行，初始化Vue自身的事件、注册Vue示例的生命周期函数等，在该阶段props、data、method都处于不可用状态；
- 1）创建VUE对象之前执行
- 2）data中的数据还未初始化
- 3）el还未关联到对应的id（还未挂载DOM）
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）
created：创建VUE对象之后执行，该阶段Vue示例已经被创建成功，初始化了props、data、methods等功能；但是Vue还未挂载dom元素（还未进行绑定）
- 1）创建VUE对象之后执行
- 2）data中的数据已经初始化
- 3）el还未关联到对应的id
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）

【示例代码1-观察dom的变化】

<body>
<div id="box">
    {{message}}
</div>

<script>
    new Vue({
        el: "#box",
        data: {
            message: 'Hello World'
        },
        // 在beforeCreate阶段的Vue,数据未初始化、dom未挂载、dom也未渲染
        beforeCreate: function () {
            console.log('创建vue实例前【beforeCreate】');
            console.log('data 数据：' + this.message);			// undefined
            console.log('挂载的对象：' + this.$el);				// undefined
            console.log('真实dom结构：' + document.getElementById('box').innerHTML);		// {{message}}
            console.log('------------------');
        },
        // 在created阶段的Vue,数据已经初始化、但dom未挂载、dom也未渲染
        created: function () {
            console.log('创建vue实例后【created】');
            console.log('data 数据：' + this.message);				// Hello World
            console.log('挂载的对象：' + this.$el);					// undefined
            console.log('真实dom结构：' + document.getElementById('box').innerHTML);		// {{message}}
            console.log('------------------');
        }
    });
</script>

</body>

【示例代码2-调用Vue数据】

<body>
<div id="box">
    {{message}}
</div>

<script>

    new Vue({
        el: "#box",
        data: {
            message: 'Hello World'
        },
        methods: {
            method() {
                console.log("method running...");
            }
        },
        beforeCreate: function () {
            console.log('创建vue实例前【beforeCreate】');

            // Vue实例还未创建成功,不能调用
            this.method();

            // Vue实例还未创建成功,不能访问数据(undefined)
            console.log(this.message);
            console.log('------------------');
        },
        created: function () {
            console.log('创建vue实例后【created】');

            // Vue实例已经创建成功,可以调用Vue方法
            this.method();

            // Vue实例已经创建成功,可以访问数据
            console.log(this.message);
            console.log('------------------');
        }
    });
</script>

</body>

4.2.2 beforeMount/mounted

beforeMount：对象挂载之前执行，此时el已经关联到对应对象，但{{}}表达式还未加载（挂载了，但还没完全挂载）
- 1）对象挂载之前执行
- 2）data中的数据已经初始化
- 3）el已经关联到对应对象（挂载了DOM）
- 4）{{}}表达式中的内容还没更新（真实DOM还未渲染）
mounted：对象挂载之后执行,此时{{}}表达已经加载，执行完mounted之后开始正常执行js代码
- 1）对象挂载之后执行
- 2）data中的数据已经初始化
- 3）el已经关联到对应对象
- 4）{{}}表达式中的内容已经更新（真实DOM已经渲染）

【示例代码1-观察dom的变化】

<body>
<div id="box">
    {{message}}
</div>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            message: 'Hello World'
        },
        // 在beforeMount阶段的Vue,数据已经初始化、dom已经挂载、但dom未渲染
        beforeMount: function () {
            console.log('挂载到dom前【beforeMount】');
            console.log('data 数据：' + this.message);			// Hello World
            console.log('挂载的对象：' + this.$el);				// [object HTMLDivElement]
            console.log('真实dom结构：' + document.getElementById('box').innerHTML);		// {{message}}
            console.log('------------------');
        },
        // 在mounted阶段的Vue,数据已经初始化、dom已经挂载、dom也已经渲染
        mounted: function () {
            console.log('挂载到dom后【mounted】');
            console.log('data 数据：' + this.message);			// Hello World
            console.log('挂载的对象：' + this.$el);				// [object HTMLDivElement]
            console.log('真实dom结构：' + document.getElementById('box').innerHTML);		// Hello World
            console.log('------------------');
        }
    });
</script>

</body>

4.2.3 beforeUpdate/updated

当修改了Vue中的数据时将会触发beforeUpdate与updated方法。

beforeUpdate：Vue数据更新前执行，此时data中的数据已经更新，但是{{}}表达式中引用的还没有更新（还未渲染到DOM上）。
updated：Vue数据更新后执行，{{}}表达式中引用也更新。

【示例代码-观察数据变更前后的值】

<body>
<div id="box">
    {{message}}
    <br>
    <button v-on:click="fun1()">改变数据</button>

</div>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            message: 'Hello World'
        },
        methods: {
            fun1() {
                this.message = Math.random();
            }
        },
        // 当修改了Vue中的数据时,beforeUpdate方法中的dom还是为渲染之前的,但Vue中的数据已经修改
        beforeUpdate: function () {

            console.log('数据变化更新前【beforeUpdate】');
            console.log('data 数据：' + this.message);
            console.log('挂载的对象：' + this.$el);
            console.log('真实dom结构：' + document.getElementById('box').innerHTML);
            console.log('------------------');
        },
        // 当修改了Vue中的数据时,updated方法中的dom已经更新为最新的数据
        updated: function () {

            console.log('数据变化更新后【updated】');
            console.log('data 数据：' + this.message);
            console.log('挂载的对象：' + this.$el);
            console.log('真实dom结构：' + document.getElementById('box').innerHTML);
            console.log('------------------');
        }
    });

</script>

</body>

4.2.4 beforeDestory/destroyed

beforeDestory：vue对象销毁前执行，在该方法中，Vue中注册的组件、侦听器、事件监听等都处于可用状态，一般在此阶段释放其他资源
destroyed：vue对象销毁后执行，在该方法中，已经销毁了Vue中注册的组件、侦听器、事件监听等；

【示例代码-观察Vue实例销毁前后的变化】

<body>
<div id="box">
    {{message}}
    <hr>
    <button @click="exit">销毁VM</button>

</div>

<script>
    var vm = new Vue({
        el: "#box",
        data: {
            message: 'Hello World'
        },
        methods: {
            exit(){
                // 销毁vm
                this.$destroy()
            }
        },
        beforeDestroy: function () {
            console.log('--------beforeDestroy----------');
        },
        destroyed: function () {
            console.log('--------destroyed----------');
        }
    });
</script>

</body>