Vue在实例化的过程中，会调 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed ，些生命周期的钩子，给我们提供了执行自定义逻辑的机会。：

1. beforeCreate ：
   • （更新前）数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象(实例刚刚创建，数据检测和事件初始化都未开始)；
2. created ：
   • （创建后） 完成数据观测，属性和方法的运算，初始化事件，$属性还没有显示出来（载入前）在挂载开始之前被调用，相关的函数首次被调用。实例已完成以下的配置：编译模板，把里面的数据和模板生成。注意此时还没有挂载到页面上。（载入后）在被新创建的el属性还没有显示出来
3. beforeMount:
   • (载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。此时打印this.$el 输出的是节点(模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 e l 属 性 ， el属性， el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点(模板编译完成，有一个虚拟DOM节点)
4. mounted:
   • (载入后）将 ( e l ) . 的 内 容 挂 载 到 了 e l ， 相 当 于 我 们 在 j q u e r y 执 行 了 (el).的内容挂载到了el，相当于我们在jquery执行了 (el).的内容挂载到了el，相当于我们在jquery执行了(el).html( e l ) , 生 成 页 面 上 真 正 的 d o m ， 上 面 我 们 就 会 发 现 d o m 的 元 素 和 我 们 el),生成页面上真正的dom，上面我们就会发现dom的元素和我们 el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作；(替换或者插入DOM,形成真实的DOM节点)
5. beforeUpdate(数据改变，但视图还没更新)
   • （更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。数据改变,但是还没有渲染的时候
6. updated：
   • 视图更新完成；
7. beforeDestroy：
   • watchers、组件和事件监听器销毁之前；
8. destroyed：
   • 销毁完成；

// An highlighted block
<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节点是虚拟的，就是先占了个坑（即

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