Vue生命周期

一、什么是生命周期？

从Vue实例创建，运行到销毁阶段，总是伴随着各种各的事件，统称为生命周期。

二、常用的声命周期函数

生命周期函数=生命周期事件=生命周期钩子

1、beforeCreate()

beforeCreate()时，data中的数据和methods中的方法还没有被创建，一般用于页面的重定向；beforeCreate()函数不能操作data和methods 。

beforeCreate() {
	console.log(this.msg)
	console.log('beforeCreate')
},

2、created()

初始化完成，第一个可以操作data和methods的生命周期，一般用于接口请求和数据初始化

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

3、beforeMount()

挂载虚拟的DOM

beforeMount() {
	console.log('beforeMount')
	// debugger
},

debugger ： 用于停止执行JavaScript，并调用调试函数，使用debugger语句类似于在代码中设置断点

4、mounted()

第一个操作DOM元素的周期，真实的DOM

mounted() {
        console.log('mounted');
},

5、beforeUpdate()

组件运行阶段的生命周期函数，更新时执行，执行0次或多次，data中的数据是最新的，页面中的数据是旧的

beforeUpdate() {
      console.log('beforeUpdate');
},

6、updated()

组件运行阶段的生命周期函数，更新时执行，执行0次或多次，data中和页面中的数据都是最新的

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

7、beforeDestroy()

beforeDestroy() 销毁前，作用是清空定时器以及页面监听

8、destroyed()

destroyed() 销毁完成

三、生命周期图解