Vue的生命周期

Vue的生命周期包括：

? ? ?beforeCreate：实例刚刚创建，数据检测和事件初始化都未开始
? ? created：数据检测和事件初始化完毕，还未开始编译模板
? ? beforeMount：模板编译完成，有一个虚拟DOM节点
? ? mounted：替换或者插入DOM,形成真实的DOM节点
? ? beforeUpdate：数据改变，但视图还没更新
? ? updated：视图更新完成
? ? beforeDestroy：watchers、组件和事件监听器销毁之前
? ? destroyed：销毁完成

示例代码

<div id="app">{{a}}</div>
 
var myVue = new Vue({
    el: "#app",
    data: {
    	a: "HelloWord"
    },
    beforeCreate: function() {
    	console.log("创建前")
	console.log(this.a) //undefined
	console.log(this.$el) //undefined
    },
    created: function() {
	console.log("创建之后");
	console.log(this.a) //HelloWord
	console.log(this.$el) //undefined
    },
    beforeMount: function() {
	console.log("mount之前")
	console.log(this.a) //HelloWord
	console.log(this.$el) //<div id="app">{{a}}</div>
    },
    mounted: function() {
	console.log("mount之后")
	console.log(this.a) //HelloWord
	console.log(this.$el) //<div id="app">HelloWord</div>
    },
    beforeUpdate: function() {
	alert("更新前");
	console.log(this.a) //Welcome to Vue,页面上显示的还是老的数据
    },
    updated: function() {
	console.log("更新完成");
	console.log(this.a) //Welcome to Vue，页面上更新为新数据
    },
    beforeDestroy: function() {
	console.log("销毁前");
	console.log(this.a) //Welcome to Vue
	console.log(this.$el) //<div id="app">Welcome to Vue</div>
    },
    destroyed: function() { 
	console.log("已销毁");
	console.log(this.a) //Welcome to Vue
	console.log(this.$el) //<div id="app">Welcome to Vue</div>
    }
});
setTimeout(function(){
	myVue.a = "Welcome to Vue";
},500)
setTimeout(function(){
	myVue.$destroy();
},1000)
setTimeout(function(){
	alert("再次改变 a 的值")
	myVue.a = "HelloWord";
},1500)

注意点：

1、beforeMount实例化之前?data是a的值：HelloWord、DOM节点是虚拟的，就是先占了个坑（即<div id="app">{{a}}</div> ）

2、$destroy这个方法销毁的是监听器，而不是视图，也就是说之后视图不再受vue控制

参考链接：https://blog.csdn.net/itKingOne/article/details/64918549