（前端学习）06-Vue.js框架Vue的生命周期

Vue的生命周期

官方分为了三个阶段分为是，

• 初始化
• 运行中
• 销毁

而以我的个人理解是分为了两个阶段

• 创建阶段
• 监听阶段

下面就以我的个人对Vue的理解来介绍一下Vue的生命周期的流程：

Vue的生命周期一共有8个钩子函数

1. beforeCreate()
2. created()
3. beforeMount()
4. mounted()
5. beforeUpdate()
6. updated()
7. beforeDestroy()
8. destroyed()

//创建阶段
		beforeCreate() {//这是我们遇到的第一个生命周期函数,表示实例完全被创建出来之前,会执行它
			//console.log(this.msg) //data数据还没初始化
			// this.show()	//报错,methods方法还没初始化
		},
//正在初始化data和methods等操作
		created() {//这是遇到的第二个生命周期函数
			// console.log(this.msg)
			// this.show()
			//在created中，data和methods都已经被初始化好了
		},
		
//进行模板的编译等操作
		beforeMount(){//这是遇到的第三个生命周期函数,表示模板已经在内存中编译完成了,
		//但是尚未把模板渲染到页面中
			// console.log(document.getElementById('h3').innerHTML)
			//在beforeMount执行的时候,页面中的元素,还没有被真正替换过来,只是之前的一些模板字符串
			
		},
//模板编译好正在替换到浏览器页面中
		mounted() {//这是遇到的第四个生命周期函数,内存中的模板,已经真实的挂载到了浏览器页面中,
		//用户已经可以看到渲染好的页面了
			// console.log(document.getElementById('h3').innerHTML)
			//mounted是实力创建期间的最后一个生命周期函数,当执行mounted就表示实例已经被创建好了
			//此时,如果没有其他操作的话,这个实例就在内存中不再改变
		},
//实例创建完成
//Vue进入监听自身阶段

//监听自身是否被改变
		beforeUpdate() {//这时候,表示我们浏览器页面还没有被更新[数据已经被更新了]
			// console.log(document.getElementById('h3').innerHTML)
			// console.log(this.msg)
		},
//同步数据到浏览器页面中
		updated(){//update执行的时候,页面和data数据已经保持同步了,都是最新的
			// console.log(document.getElementById('h3').innerHTML)
			// console.log(this.msg)
		},
//数据更新完成
		
//监听是否需要销毁
		//销毁阶段
		beforeDestroy() {//进入销毁阶段,此时data和methods方法,指令、过滤器等都在可用状态
			
		},
//进行销毁等操作
		destroyed() {//销毁完成
			
		}

以上为我在学习Vue的时候的总结，如有错误还望指出，我好修改。