Vue生命周期解析

Vue的生命周期包括：

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

再来一张Vue 的生命周期图：

示例代码演示：

<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控制