vue的生命周期

什么是生命周期

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载 Dom、
渲染→更新→渲染、销毁等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创
建到销毁的过程，就是生命周期。

vue的八个生命周期

1. beforeCreate 创建之前

实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate 钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的 dom，一般不做操作

2.created 创建之后

挂载数据，绑定事件等等，然后执行 created 函数 可以访问到数据，但访问不到DOM

3.beforeMount 挂载之前

dom 已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发 updated。可以访问数据和DOM
但此时的DOM还没有渲染

4. mounted 挂载之后

组件已经出现在页面中，数据、真实 dom 都已经处理好了,事件都已经挂载好了，可以在这里操作真实 dom 等事情。可以访问数据和DOM，DOM已经渲染

5. beforeUpdate 更新渲染之前

vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟dom 树利用 diff 算法进行对比之后重新渲染，一般不做什么事儿 可以访问数据和DOM，DOM已经渲染

6.updated 更新渲染完成

当更新完成后，执行updated，数据已经更改完成，dom 也重新 render 完成，可以操作更新后的虚拟 dom

7.beforeDestroy 销毁之前

一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等

8.destroyed 销毁之后

组件的数据绑定、监听…去掉后只剩下 dom 空壳

<div id="app" ref="app">
	{{name}}
</div>
<script type="text/javascript">
	let vm = new Vue({
		el:"#app",
		data:{
			name:"VUE开发"
		},
		
		//01 创建之前 数据还没有挂载呢，只是一个空壳，无法访问到"数据"和真实的"DOM"
		/* beforeCreate(){
			console.log("将要创建");
			console.log(this.$data);
			console.log(this.$el)
		}, */
		
		//02 创建完成 获取初始化数据，无法渲染DOM
		/* created(){	
			console.log("创建完毕");
			console.log(this.$data);
			console.log(this.$el)
		}, */
		
		//03 即将挂载
		/* beforeMount(){	
			console.log("即将挂载");
			console.log(this.$data);
			console.log(this.$el)
		}, */
		//04 挂载完毕
		/* mounted(){	//有数据，有DOM 已渲染
			console.log("即将挂载");
			console.log(this.$data);
			console.log(this.$el)
		}, */
		
		//05 更新渲染之前
		/* beforeUpdate(){
			//控制台输入 vm.$data.name="新值" 后触发函数 beforeUpdate()
			console.log("即将更新渲染");
			let name = this.$refs.app.innerHTML;
			console.log("name:" + name)
		}, */
		
		//06 更新渲染之后
		/* updated(){	//渲染完成，data中的数据已被更新后的值替换
			console.log("更新渲染完成");
			let name = this.$refs.app.innerHTML;
			console.log("name:" + name)
		}, */
		
		// 07 销毁之前
		//以下两个在控制台并不能打印出来，执行完vm.$destroy()即可打印
		beforeDestroy(){
			console.log("before destroy销毁之前");
			console.log("data:" + this.$data);
			console.log("dom:" + this.$el);
			console.log("------------");
		},
		//08 销毁之后
		destroyed(){
			console.log("destroyed销毁完成");
			console.log("data:" + this.$data);
			console.log("dom:" + this.$el);
			console.log("------------");·	
		}
	})
	console.log("vue实例外的打印输出"+vm.$data)
</script>