Vue生命周期

Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。

Vue 实例有⼀个完整的⽣命周期，也就是从

开始创建、

初始化数据、

编译模版、

挂载Dom -> 渲染、更新 -> 渲染、.......

卸载

等⼀系列过程，称这是Vue的⽣命周期。钩子函数是Vue生命周期中每个阶段对外开放让程序员操作Vue的接口。Vue有8个钩子函数。

一.beforeCreate() 初始化前

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

beforeCreate(){
       console.log("beforeCreate",this.num,this.$el);
},

二.created( 初始化后 ) 

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

created() {
		//创建完毕,有data,没有el和dom节点
		console.log("**created",this.num,this.$el);
		//作用:发起ajax请求,开始定时器,监听事件(window)
		window.addEventListener('resize',this.showWin)
	},

三.beforeMount( 挂载前)

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

beforeMount() {
		//dom挂载前,有$el,但没有渲染数据
		//访问this.$el打印仍然是undefined是因为使用脚手架,动态更新造成的(在非脚手架状态下可以)
		console.log('beforeMount',this.$el,this);
	},

四:Mounted( 挂载后)

此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。 这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。

mounted(){
		//有dom节点,数据也渲染
		console.log('mounted挂载',this);
		console.log(this.$el.innerHTML,'mounted执行才能看到挂载DOM');
		//作用:发起ajax请求,开启定时器,监听事件-操作dom节点
	},

五.beforeUpdate(数据更新前)

更新前状态（view层的数据变化前，data中的数据已经改变）

获取DOM元素也是可以的

beforeUpdate(){
		//会执行多次
		//数据更新,dom节点也更新
		//console.log("beforeUpdate",this.num,document.querySelector("#btn").innerHTML);
	},

六.updated

数据已经更改完成，dom也重新渲染完成。页面的数据和data中的保持一致了

updated() {
		//会执行多次
		//数据更新,dom节点也更新
		//组件更新后,数据更新,视图已经更新
		console.log("beforeUpdate",this.num,document.querySelector("#btn").innerHTML);
	},

七.beforeDestroy

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

	beforeDestroy() {
		//数据可以更新,视图已经不再更新
		//作用:移除事件监听,停止计时器,不移除依旧会执行下去
		// this.num++
		// console.log("卸载前beforeDestroy",this.num);

		clearInterval(this.stopId);//清除计时器
		window.removeEventListener('resize',this.showWin)
			
	},

八.destroyed

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

destroyed() {
		//没有this,切断视图与vue实例的关系
		console.log('卸载后destroyed');
	}