Vue生命周期

生命周期

​ 概念：从Vue实例创建、运行、销毁时，总伴随着各种事件，而那些事件统称为生命周期

​ 生命周期钩子 = 生命周期函数 = 生命周期事件

​
_{此图来源于Vue官网}

初始化阶段

new Vue() ->初始化一个空的Vue实例，仅有一些默认的生命周期函数和默认方法-> 初始化数据和方法

模板编译

会校验el属性，再查看是否具有template -->辨别是将html模块编译成模板还是直接模板

此时该模板字符串便被渲染为 内存中的DOM，即还未被加载于页面

页面渲染

将刚才的模板字符串渲染到浏览器的页面中来

运行阶段

本阶段会查看数据是否有变化–>Yes,则重新渲染、挂载页面

销毁阶段

相关钩子函数

var vm = new Vue({
				el: "#app",
				data:{},
				beforeCreate(){//实例被完全创建出来前执行
					//在该周期，data和method都还未被初始化
				},
				created(){ //
					//此时，data和method都已初始化
				},
				beforeMount(){
					//模板已编译于内存中，但未被页面渲染
					//即{{}} 还未有效
				},
				mounted(){
					//当执行该函数时，实例已被完全创建好了。若没有后续操作，则一直放置于内存中
				},
				beforeUpdate(){
					//数据发生改变时，this.data已发生变化，但html的value未改变
				},
				updated(){
					//数据的变化，页面也已渲染完成
				},
				beforeDestroy(){
					//此时，实例的相关内容仍然有效
				},
				destroyed(){
					//实例已被销毁，相关内容已无效
				}
				
			})