vue的生命周期

         Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程，称这是Vue的⽣命周期。把执行过程的回调函数称为生命周期钩子函数。

 1.beforeCreate(创建前)

有this，没有data和methods

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

2. created(创建后)

有data,没有$el，dom节点，一般在此对数据进行初始化，比如ajax请求。

created(){
			// 创建完毕,有data,没有el
			// console.log("*created",this.num,this.$el)
			// 作用:发起ajax请求,开启定时器,监听事件(window)
		},

3.beforeMount（挂载前）

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

beforeMount(){
			// dom挂载前,有$el,没有渲染数据
			// 使用脚手架,动态更新造成的(在非脚手架状态下可以)
			// console.log("beforeMount",this,document.querySelector("#btn"))
		},

4.mounted（挂载后）

此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。

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

5.beforeUpdate(更新前)

会执行多次数据更新，dom节点没有更新

beforeUpdate(){
			// 组件的更新前,数据更新,视图没有更新
			// console.log("beforeUpdate",this.num,document.querySelector("#btn").innerText)
		},

6.updated（更新后）

会执行多次数据更新，dom节点更新

7.beforeDestroy（销毁前）

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

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

8.destroyed（销毁完毕）

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

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