vue生命周期

目录

Vue生命周期简介

每个周期介绍

1、beforeCreate( 创建前 ) 

 2、created( 创建后 ) 常用

 3、beforeMount( 挂载前)

 4、Mounted( 挂载后) 常用

 5、BeforeUpdate（更新前）

 6、Updated（更新后）

7、BeforeDestroy（销毁前）常用

 8、Destroy(销毁后)

其余三个生命周期 

拓展：父组件与子组件生命周期钩子执行顺序

加载渲染过程

组件更新过程

销毁过程

---

Vue生命周期简介

 Vue的生命周期就是vue实例从创建到销毁的全过程，new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。vue的生命周期常见的主要分为4大阶段8大钩子函数。另外三个生命周期函数不常用

每个周期介绍

1、beforeCreate( 创建前 ) 

这个时候，在实例被完成创建出来，$el和data都没有初始化，不能访问data、methods，不能获得DOM节点，此时的数据观察和事件机制都未形成。(没有data，没有el)一般在这个阶段不进行操作。

使用场景：因为此时data和methods都拿不到，所以通常在实例以外使用，可以在这加个loading事件，在加载实例时触发

	beforeCreate(){
			 //创建前,有this,没有data,methods dom节点
			 console.log("beforeCreate",this.num,this);
		},

 2、created( 创建后 ) 常用

这个时候，vue实例中的data、methods已被初始化，属性也被绑定，但是此时还是虚拟dom，真实dom还没生成(有data，没有el)。这个时候可以调用data和methods的数据及方法，created钩子函数是最早可以调用data和methods的，故一般在此对数据进行初始化。

在这个阶段vue实例已经创建，仍然不能获取DOM元素。

使用场景：发送ajax请求，开启定时器，监听事件（window）

	created(){
			// 创建完毕,有data,没有el
			 console.log("*created",this.num,this.$el);
			//作用：发送ajax请求，开启定时器，监听事件（window）
			
			//开启定时器
			 this.stopId=setInterval(()=>{
			 	this.num++;
				console.log("滴答");
			 },1000)
			
			//监听事件
			window.addEventListener("resize",this.showWin)
		},

 3、beforeMount( 挂载前)

此时模板已经编辑完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。

beforeMount(){
			//dom挂载前，有$el,没有渲染数据
			console.log("beforMount",this,document.querySelector('#btn'));
		},

 4、Mounted( 挂载后) 常用

此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了。mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。。

使用场景：发送ajax请求，开启定时器，监听事件（window）、绑定自定义事件、订阅消息、操作DOM等；

	mounted(){
			//挂载完毕
			 console.log('*mounted',this.$el,document.querySelector("#btn"));
			// this当前组件的实例
			//this.$el当前组件的dom节点
			//this.num当前组件的属性
			 console.log(this,this.$el,'组件的实例this');
			//作用：发起ajax请求，开启定时器，监听事件--操作dom节点
		},

 5、BeforeUpdate（更新前）

更新前状态（view层的数据变化前，不是data中的数据改变前），重新渲染之前触发，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。只有view上面的数据变化才会触发beforeUpdate和updated，仅属于data中的数据改变是并不能触发。

beforeUpdate(){
	 console.log("beforeUpdate",this.num,document.querySelector("#btn").innerText);
		},

 6、Updated（更新后）

数据已经更改完成，数据更新，dom视图也已经更新。

	updated(){
			//组件更新后，数据更新，视图已经更新
		 console.log("updated",this.num,document.querySelector("#btn").innerText);
		},

7、BeforeDestroy（销毁前）常用

销毁前执行（$destroy方法被调用的时候就会执行）,一般在这里善后:清除计时器、清除非指令绑定的事件、取消消息订阅等等…’);

在这里销毁的好处：不论是主动销毁还是被动销毁，销毁前都会清除相关事件。如：若写在方法中，被动销毁可能因为不会触发方法，而无法清除定时器

        this.$destroy(); // 销毁vue实例 触发销毁前后两个周期方法beforeDestroy()...

		beforeDestroy(){
			//关闭计时器
			 clearInterval(this.stopId)
			
			//移除事件监听
			window.removeEventListener("resize",this.showWin)
			
			//数据可以更新，视图已经不响应
			this.num++;
			 console.log("卸载前","beforeDestroy",this.num);
			 alert("卸载前")
		},

 8、Destroy(销毁后)

销毁后 （Dom元素存在，只是不再受vue控制）,卸载watcher，事件监听，子组件。

销毁后自定义事件会失效，但原生DOM事件仍然有效

destroyed(){
			//切断视图与vue实例的联系
			 console.log("卸载后","destroyed");
		}

其余三个生命周期 

vue的生命周期常见的主要分为4大阶段8大钩子函数

另外三个生命周期函数不常用（ activated、deactivated与keep-alive相关，errorCapured已废弃 ）

keep-alive 主要用于保留组件状态或避免重新渲染。

• activated只有在keep-alive 组件激活时调用。
• deactivated只有在keep-alive 组件停用时调用。
• errorCapured 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

拓展：父组件与子组件生命周期钩子执行顺序

加载渲染过程

速记：父先创建，才能有子；子创建完成，父才完整。

顺序：父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

组件更新过程

顺序：父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

销毁过程

顺序：父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed