VUE | 生命周期

生命周期：

1. 又名生命周期回调函数、生命周期函数、生命周期钩子。
2. 是什么？Vue在关键时刻我们调用的一些特殊名称的函数。
3. 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
4. 生命周期函数中的this指向的是vm或组件实例对象。

目录

一、beforeCreate和created

​编辑

 

1.beforeCreate

2.created 

 二、beforeMount和mounted

1.beforeMount

2.mounted

三、beforeUpdate和updated

1. beforeUpdate

2.updated

四、beforeDestroy和destroyed

1. beforeDestroy

2.destroy

---

一、beforeCreate和created

 

1.beforeCreate

在我们new一个Vue的实例对象，首先是对实例对象进行初始化生命周期和事件，但是【数据代理】还没有开始，所以此时，还没有办法通过vm访问data中的数据以及methods中的方法。

    <script>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                n:1
            },
            beforeCreate() {
                console.log('beforeCreate')
                console.log(this)
                debugger
            },
            methods: {
                add(){
                    this.n++
                }
            },
        })
    </script>

 

我们在vm上并没有找到methods中的add()方法，甚至_data都没有。

2.created 

在【beforeCreate】之后呢，实例对象初始化了【数据监测】和【数据代理】，这也就意味着，我们可以通过vm访问到data中的数据以及methods中的方法了。

            created() {
                console.log('Create')
                console.log(this)
            },

数据代理的体现：

 数据监测的体现：

 二、beforeMount和mounted

在【created】到【beforeMount】这个阶段，Vue开始解析模板，生成虚拟DOM，但页面并不能展示解析好的内容。

1.beforeMount

 页面呈现的是未经Vue编译的DOM结构，所有对DOM的操作，最终都不奏效。

断点之前：

 断点之后 ：

  

 不管你在【beforeMount】这个生命周期中做了什么，都是自娱自乐，Vue都会把之前的虚拟DOM转换成真实DOM，你的这些操作，和它一毛钱关系都没有。

将内存中的虚拟DOM转换成真实DOM。

2.mounted

此时，页面中呈现的是经过Vue编译的DOM，对DOM的操作均有效。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

三、beforeUpdate和updated

1. beforeUpdate

可能在面试的时候，会有面试官会问：在哪个生命周期中页面和数据尚未保持一致？

没错，就是我们的【beforeUpdate】！

然后根据新数据，生成新的虚拟DOM，随后新旧虚拟DOM进行对比，最终完成了页面更新。

2.updated

此时，数据是新的，页面也是新的。即：页面和数据保持一致。

四、beforeDestroy和destroyed

1. beforeDestroy

清除定时器、解绑自定义事件、取消自定义事件、取消订阅消息等【收尾工作】

2.destroy

关于销毁Vue实例：

1. 销毁后借助Vue开发者工具看不到任何信息。
2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
3. 一般不会在beforyDestroy操作数据，因即便操作数据，也不会再触发更新流程了。

okok，今天就到这。拜比~