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有8个钩子函数。

二、图例

三、详解

1、beforeCreate( 创建前 ) 

这个时候，在实例被完成创建出来，$el和data都没有初始化，不能访问data、method，一般在这个阶段不进行操作。

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

 2、created( 创建后 )

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

	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(){
			//挂载完毕
			 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也重新render完成。

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

7、BeforeDestroy（销毁前）

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

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

 8、Destroy(销毁后)

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

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