如何理解Vue实例的生命周期

最新推荐文章于 2021-10-12 23:16:09 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2021-10-12 23:16:09 发布

阅读量574

点赞数 1

分类专栏： Vue.js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_39055970/article/details/106345035

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

如何理解Vue实例的生命周期

生命周期是什么
生命周期函数的分类
生命周期函数实例
每个周期函数的存在时间和表现形式
生命周期图解

生命周期是什么

概念：Vue生命周期，听起来好像很高大上，其实就是Vue实例从创建、运行到销毁期间遇到的各种事件的总和。就像我们人从出生到成长到死亡的整个过程遇到的各种事件一样。
生命周期钩子，其实就是生命周期事件的别名而已。
生命周期钩子 = 生命周期函数 = 生命周期事件。

生命周期函数的分类

生命周期函数 = 创建期间的生命周期函数 + 运行期间的生命周期函数 + 销毁期间的生命周期函数。

生命周期函数实例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
</head>

<body>
    <div id="app">
        <button @click="sayNo">修改msg</button>
        <h2 id="h2">{{msg}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                msg: "OK"
            },
            methods: {
                show() {
                    console.log('执行了show方法');
                },
                sayNo() {
                    this.msg = 'NO';
                },
            },
            beforeCreate() {
                console.log('beforeCreate:');
                console.log('date的msg：' + this.msg);
                this.show();
            },
            created() {
                console.log('created:');
                console.log('date的msg：' + this.msg);
                this.show();
            },
            beforeMount() {
                console.log('beforeMount：');
                console.log('date的msg：' + this.msg);
                console.log('页面内容的msg：' + document.getElementById('h2').innerText);
            },
            mounted() {
                console.log('Mounted：');
                console.log('date的msg：' + this.msg);
                console.log('页面内容的msg：' + document.getElementById('h2').innerText);
            },
            beforeUpdate() {
                console.log('beforeUpdate:');
                console.log('date的msg：' + this.msg);
                console.log('页面内容的msg：' + document.getElementById('h2').innerText);
            },
            updated() {
                console.log('updated:');
                console.log('date的msg：' + this.msg);
                console.log('页面内容的msg：' + document.getElementById('h2').innerText);
            },
            beforeDestroy() {

            },
            destroyed() {

            }
        });
    </script>
</body>

</html>

每个周期函数的存在时间和表现形式

创建期间的生命周期函数

（1）beforeCreate函数
这是遇到的第一个生命周期函数，表示Vue实例完全被创建出来前，会执行它，此时data和methods中的数据都还没初始化。

beforeCreate() {
    console.log('beforeCreate:');
    console.log('date的msg：' + this.msg);
    this.show();
},

在这里插入图片描述

（2）created函数
这是遇到的第二个生命周期函数，表示Vue开始编辑模板，把Vue中的那些指令进行执行，最终在内存中生成一个已经编译好的最终模板字符串。然后，把这个模板字符串，渲染为内存中的DOM，此时，只是在内存中，渲染好了模板，并没有真正把模板挂在到页面中去。

created() {
    console.log('created:');
    console.log('date的msg：' + this.msg);
    this.show();
},

在这里插入图片描述

（3）beforeMount函数
这是遇到的第三个生命周期函数，表示模板已经在内存中完成了，但是尚未把模板渲染到页面中，在beforeMounted 执行的时候，页面中的元素还没有真正替换过来，只是之前写的一些模板字符。

beforeMount() {
    console.log('beforeMount：');
    console.log('date的msg：' + this.msg);
    console.log('页面内容的msg：' + document.getElementById('h2').innerText);
},

在这里插入图片描述

（4）mounted函数
这是遇到的第四个生命周期函数，表示，内存中的模板已经真实挂在到了页面中，用户可以看到渲染好的页面了。注意： mounted是实例创建期间的最后一个生命周期函数，执行完mounted 就表示，实例已经完全地创建好了。此时，如果没有其他操作地话，这个实例，就静静地躺在我们地内存中，一动不动。

mounted() {
   console.log('Mounted：');
    console.log('date的msg：' + this.msg);
    console.log('页面内容的msg：' + document.getElementById('h2').innerText);
},

在这里插入图片描述

运行期间的生命周期函数

（1）beforeUpdate函数
当运行beforeUpdate的时候，页面中的显示数据还是旧的，此时data数据是最新的，页面还未和数据保持同步。

beforeUpdate() {
    console.log('beforeUpdate:');
    console.log('date的msg：' + this.msg);
    console.log('页面内容的msg：' + document.getElementById('h2').innerText);
},

在这里插入图片描述

（2）updated函数
updated事件执行的时候，页面和data数据已经保持同步了，都是最新的。

updated() {
    console.log('updated:');
    console.log('date的msg：' + this.msg);
    console.log('页面内容的msg：' + document.getElementById('h2').innerText);
},

在这里插入图片描述
注意：如果页面是一个静态页面，数据完全没有任何变化，那么beforeUpdate函数和updated函数就可以永远不会执行。如果数据一直在变化，那么beforeUpdate函数和updated函数的执行次数可以为无数次。

销毁期间的生命周期函数

（1）beforeDestroy函数
当执行beforeDestroy钩子函数的时候，Vue实例已经从运行阶段进入到了销毁阶段；此时Vue实例上所有的data和所有的methods，以及过滤器、指令等都还处于可用状态，此时还没有真正执行销毁的过程。

（2）destroyed函数
当执行destroyed钩子函数的时候，组件已经完全销毁了；此时Vue实例上所有的data和所有的methods，以及过滤器、指令等都已经不可用了。
注意：对于这两个函数，初学者了解即可。

生命周期图解

在这里插入图片描述

Sheldon一蓑烟雨任平生

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何理解Vue实例的生命周期

如何理解Vue实例的生命周期生命周期是什么生命周期函数的分类生命周期函数实例每个周期函数的存在时间和表现形式创建期间的生命周期函数运行期间的生命周期函数销毁期间的生命周期函数生命周期图解生命周期是什么概念：Vue生命周期，听起来好像很高大上，其实就是Vue实例从创建、运行到销毁期间遇到的各种事件的总和。就像我们人从出生到成长到死亡的整个过程遇到的各种事故一样。生命周期钩子，其实就是生命周期事件的别名而已。生命周期钩子 = 生命周期函数 = 生命周期事件。生命周期函数的分类生命周期函数 = 创建期
复制链接

扫一扫