Vue实例的生命周期

本篇文章根据Vue官方的生命周期例图来介绍Vue实例的生命周期与其中的方法
先上图：

1. new Vue()
   new Vue的过程就是创建一个Vue对象，该对象中的data:{ //数据 }与methods:{ //回调函数 }也都被创建出来，但还未被赋值

2. 初始化，事件&生命周期
   该状态也是空的vue对象，并未绑定data中数据与回调方法

• beforeCreate方法

var app1 = new Vue({
	el: "#app1",
	data: {
		content: "武汉加油"
	},
	beforeCreate: function() {
			//vue对象的第一个生命周期回调函数，表示当前Vue对象刚刚被创建
			//在此回调函数中，data与methods中的数据没有和Vue对象绑定
			alert("content:" + this.content);
			//此时获取不到 content 中的内容
		}
	});
}

3. 初始化，注入&校验
   当前状态vue对象绑定了data数据与methods中的回调方法，表示此后可以调用data数据与methods中方法

• created方法

var app1 = new Vue({
	el: "#app1",
	data: {
		content: "武汉加油"
	},
	methods: {
		showContent: function() {
			alert("showContent方法:" + this.content);
		}
	},
	created: function() {
			//vue对象的第二个生命周期回调函数，此函数最早能够调用Vue中绑定的数据和方法
			this.showContent();
		}
	});
}

4. 是否指定el元素选项
   vue对象开始构建el负责的view视图区域，也就是html与vue相关联的部分，将view视图加载到内存中，形成dom树，然而还未将data模型层中的数据赋予页面，页面中例如{{content}}的数据仍为空，直到创建 vm.$el 时

• beforeMount方法

<div id="app1">
	<span id="myspan">{{content}}</span>
</div>

var app1 = new Vue({
	el: "#app1",
	data: {
		content: "武汉加油"
	},
	methods: {
		showContent: function() {
			alert("showContent方法:" + this.content);
		}
	},
	beforeMount: function() {
		//Vue对象的第三个生命周期回调函数，view视图已经被加载到内存中，没有渲染data数据
			alert(document.getElementById("myspan").innerHTML);
			//此时弹框拿不到数据，显示未定义
		}
	});
}

• mounted方法，在该方法与beforeMount方法中都可以使用Ajax获取服务器中的数据，并将数据赋给data

var app1 = new Vue({
	el: "#app1",
	data: {
		content: "武汉加油"
	},
	methods: {
		showContent: function() {
			alert("showContent方法:" + this.content);
		}
	},
	mounted: function() {
			//Vue对象的第四个生命周期回调函数，内存中构建的视图模板显示渲染到页面中，用户可以查看到model层的数据
			alert(document.getElementById("myspan").innerHTML);
			//这时可以获取到页面数据
		}
	});
}

5. 挂载完毕，当data被修改前会调用beforeUpdate方法，相当于监听数据变化，此时数据模型层数据已发生变化，但视图层还是旧的数据，还未实时同步

• beforeUpdate方法，在点击按钮2后改变content的数据

<div id="app1">
	<span id="myspan">{{content}}</span>
	<input type="button" value="按钮1" @click="showContent()" />
	<input type="button" value="按钮2" @click="changeContent()" />
</div>

var app1 = new Vue({
	el: "#app1",
	data: {
		content: "武汉加油"
	},
	methods: {
		showContent: function() {
			alert("showContent方法:" + this.content);
		},
		changeContent: function() {
			this.content = "武汉🐂🍺";
		}
	},
	beforeUpdate: function() {
			//监听model层数据变化，vue对象的第五个生命周期回调函数
			alert(document.getElementById("myspan").innerHTML)//显示 "武汉加油"
			alert(this.content);// 显示 "武汉🐂🍺"
		}
	});
}

• updated方法，此时数据模型层和视图层的数据同步

var app1 = new Vue({
	el: "#app1",
	data: {
		content: "武汉加油"
	},
	methods: {
		showContent: function() {
			alert("showContent方法:" + this.content);
		},
		changeContent: function() {
			this.content = "武汉🐂🍺";
		}
	},
	updated: function() {
			//监听model层数据变化完成，vue对象的第六个生命周期回调函数
			alert("updated方法");
		}
	});
}

6. 调用 vm.$ destroy() 函数后，该vue实例自动销毁，$ destroy()函数时vue提供的删除api，$ delete(数组，元素下标)，例如：app1.$delete(app1.datas, index);

7. 调用destroyed方法之后，vue对象中所声明的内容都将失效