一、什么是生命周期

人有自己的生命,生物也有自己生命,万物都有自己的生命,而我们的Vue实例对象也是有自己的的生命的。生命周期指的就是Vue 实例从创建到销毁的过程。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。

注意
1.生命周期又名:生命周期回调函数、生命周期函数、生命周期钩子
2.生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的。
3.生命周期函数中的this指向是vm 或组件实例对象。

二、生命周期的作用

生命周期中有很多事件钩子,可以让我们控制整个Vue实例的过程时更容易形成好的逻辑。

三、生命周期的三个阶段(挂载、更新、销毁)

1.挂载阶段

(1) 初始化:生命周期、事件,但数据代理未开始 ==> beforeCreate

此时,无法通过vm访问到data中的数据、methods中的方法。
比如说:我们先创建一个一个Vue实例对象

 const vm = new Vue({
            el: "#root",
            data: {
                n: 1,
            },
 })

在beforeCreate里设置一个断点debugger,我们来看看能不能打印出 n 的值

beforeCreate() {
                console.log('beforeCreate',this.n);
                debugger; 
            },

在这里插入图片描述
显而易见,无法访问访问到data中的数据

(2)初始化:数据监测、数据代理 ==> created

此时,可以通过vm访问到data中的数据、methods中配置的方法。
让我们来对比一下beforeCreate和created

 beforeCreate() {
                console.log('beforeCreate',this.n);
                // debugger;
                
 },
 created() {
       console.log('created',this.n);
       debugger;
 },

在这里插入图片描述
结果显而易见,在created函数里我们可以看见data中的n值·

(3)解析模版,生成虚拟DOM==>beforeMount

此时,页面呈现的是未经Vue编译的DOM结构,所有对DOM的操作最终都不奏效,因为都会被后续的页面渲染给覆盖掉。
那么,接下来我们验证一下。

<div id="root">
        <h2>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>

我们在这个阶段用dom来操作h2的值

 beforeMount() {
                console.log('beforeMount');
                document.querySelector('h2').innerHTML = 'DOM操作不奏效'
                debugger
            },

在这里插入图片描述在断点时,我们可以发现确实是改变了,但当我们继续运行后就发现。
在这里插入图片描述
这个DOM操作就失效了。那是因为在这时页面上呈现的都是未经Vue编译的DOM结构,后面的DOM就会被Vue重新渲染,所以此时最好不要进行DOM操作,因为,压根不会是实现啊!

(4)将内存中的虚拟DOM转化为真实DOM插入页面 ==>mounted

此时,页面呈现的是经过Vue编译的DOM结构,所有对DOM的操作均奏效,可以在此阶段进行一些初始化操作.
验证一下:

mounted() {
          console.log('mounted');
          document.querySelector('h2').innerHTML = 'DOM操作奏效'
},

在这里插入图片描述
没有问题确实奏效。好了以上就是生命周期的挂载阶段。

2.更新阶段

数据发生改变 ==>beforeUpdate ==> 生成新的虚拟与旧的进行比较,完成页面更新 ==> update

(1) beforeUpdate 在页面数据更新前

此时数据是新的,页面是旧的。即:页面尚未与数据保持同步

beforeUpdate() {
                console.log("beforeUpdate",this.n);
                debugger
},

请添加图片描述

此时,不难发现在这时,数据虽然发生改变,但并没有渲染到页面上。

(2) updated 在页面数据更新后

此时数据是新的,页面是新的。即:页面与数据保持同步

 updated() {
                console.log('updated'); 
                debugger
 },

此时,页面与数据已经开始保持同步。
请添加图片描述

3.销毁阶段

(1)beforeDestroy (销毁前)

看了什么几个大家应该都懂了,这个阶段就是处在销毁之前,也就是像人的弥留之际一样,所有的功能依旧完好,一般是用来做一些收尾工作,比如:关闭定时器、接触自定义事件等等收尾操作。

(2)destroyed (销毁后)

一切又回到回到最初开始前的样子,轻轻它走了,正如它轻轻地来,挥一挥衣袖,不带走一遍云彩。

四、总结生命周期

常用的生命周期钩子
1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】
2.beforeDestroy:清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】
关于销毁Vue实例
1.销毁后借助Vue开发者工具看不到任何信息。
2.销毁后自定义事件会失效,但原生DOM事件依然有效
3.一般不会在beforeDestroy操作数据,因为即使操作数据,也不会触发更新流程了。

Logo

前往低代码交流专区

更多推荐