Vue的生命周期

生命周期介绍

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
简单说就是一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期。

vue生命周期有什么作用

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

beforeCreate（创建前）

介绍：实例初始化之后，组件被创建时，这时候 el，data，message 都是 underfined

created（创建后）

介绍：实例创建完成后，data、methods 被初始化

beforeMount（载入前）

介绍：完成el和data初始化，在挂载开始之前被调用。可以发送数据请求

mounted（载入后）

介绍：vue实例已经挂载到页面中

获取 el 中 DOM 元素，进行 DOM 操作；如果返回的数据操作依赖 DOM 完成，推荐这个时候发送数据请求

beforeUpdate（更新前）

介绍：数据更新时调用

挂载完成之前访问现有DOM，比如手动移除已添加的事件监听器；也可以进一步修改数据

updated（更新后）

介绍：由于数据更改，重新渲染时调用

可执行依赖与DOM的操作

beforeDestory（销毁前）

介绍：实例销毁之前调用

实例销毁之前，执行清理任务，比如：清除定时器等

destoryed（销毁后）

介绍：vue实例销毁后调用。调用后，Vue实例指示的所有东西都会被解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁
提示已删除。

生命周期代码执行效果

<script type="text/javascript">
			let helloCom = Vue.component("hello-com",{
				template:'<div><h1>{{laochen}} </h1><button @click="changeData">修改数据</button></div>',
				data:function(){
					return {
						laochen:"hello laochen"
					}
				},
				methods:{
					changeData:function(){
						this.laochen = "hello 小明"
					}
				},
				beforeCreate() {
					console.log('beforeCreate')
					// 此时数据data和事件方法methods还未绑定到app对象上
				},
				
				created() {
					console.log('created')
					// 数据data和方法methods绑定到应用对象app上
					
					
				},
				beforeMount(){
					//渲染之前,根据数据生成的DOM对象是获取不到的
					console.log('beforeMount')
				},
				mounted(){
					console.log('mounted')
					//渲染之后,可以获取数据生成的DOM对象
					
				},
				beforeUpdate() {
					//数据更改,但内容未更改之前
					console.log('beforeUpdate')
				},
				updated() {
					//内容已更新完毕
					console.log('update')
				},
				beforeDestroy() {
					//应用销毁之前
					console.log("beforeDestory")
				},
				destroyed(){
					//应用销毁之后
					console.log("Destory")
				}
			})
			let app = new Vue({
				el:"#app",
				data:{
					isShow:true
				}
			})
		</script>

页面运行效果