vue——Vue实例生命周期

Vue实例生命周期： Vue生命周期图示.

Vue生命周期图示生命周期函数就是vue实例在某一个时间点会自动执行的函数。

生命周期函数（钩子）有：

1、beforeCreate：初始化事件和生命周期相关内容完成后
2、created：处理外部注入（例如：双向绑定）后
3、beforeMount：初始化结束后，判断是否有el，是否有template，如果有则执行，如果没有将el内部的内容当做模板来执行。该函数在模板和数据相结合，即将挂载到页面上时执行
4、mounted：模板结合数据生成的最终的Vue实例里的DOM元素挂载到页面上之后执行，即页面渲染完成后
5、beforeDestroy：当 vm.$destroy()这个方法被调用后，组件即将销毁的时候调用
6、destroyed：组件被完全销毁后调用
7、beforUpdate：当数据发生改变，还没有重新渲染时执行

8、updated：数据发生改变后，已染后时执行

生命周期函数不放在methods里面，而是直接放在Vue实例里面。

更多:生命周期函数.

// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
var vm = new Vue({
	el: "#app",
	template: "<div>{{test}}</div>",
	data: {
		test: "hello world"
	},
	beforeCreate: function() {   //beforeCreate：初始化事件和生命周期相关内容完成后
		console.log("beforeCreate");
	},
	created: function() {。     //created：处理外部注入（例如：双向绑定）后
		console.log("created");
	},
	beforeMount: function() {  //beforeMount：初始化结束后，判断是否有el，是否有template，如果有则执行，如果没有将el内部的内容当做模板来执行。该函数在模板和数据相结合，即将挂载到页面上时执行
		console.log(this.$el);
		console.log("beforeMount");
	},
	mounted: function() {     //mounted：模板结合数据生成的最终的Vue实例里的DOM元素挂载到页面上之后执行，即页面渲染完成后
		console.log(this.$el);
		console.log("mounted");
	},
	beforeDestroy: function() { //当 vm.$destroy()这个方法被调用后，组件即将销毁的时候调用
		console.log("beforeDestroy");
	},
	destroyed: function() {    //destroyed：组件被完全销毁后调用
		console.log("destroyed");
	},
	beforeUpdate: function() {  //beforUpdate：当数据发生改变，还没有重新渲染时执行
		console.log("beforeUpdate");
	},
	updated: function() {      //updated：数据发生改变后，已染后时执行
		console.log("updated");
	}
})