创建阶段

1.创建一个Vue的实例

new Vue({});

2.Init Events & Lifecycle

表示刚初始化了一个Vue空的实例对象，这时候，这个对象身上只有默认的一些生命周期函数和默认的事件。其它的还没有创建。

3.beforeCreate

beforeCreate与data、methods等平级，是第一个生命周期函数。表示实例完全被创建出来之前，会执行该函数

var vm=new Vue({

el:"#app",

data:{

msg:'hello'

},

methods:{

show(){

console.log('show()');

}

},

beforeCreate() {

console.log(this.msg);//undefined

this.show(); //TypeError:this.show is not a function

}

})

由上可知，在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。

4.Init injections & reactivity

初始化data和methods。

5.created

这是第二个生命周期函数

var vm = new Vue({

el: "#app",

data: {

msg: 'hello'

},

methods: {

show() {

console.log('show()');

}

},

created() {

console.log(this.msg);//'hello'

this.show();//'show()'

}

})

如果要调用methods中的方法或者操作data中的数据，最早只能在created中去操作

6.判断流程图

表示Vue开始编译模板，把Vue代码中的指令进行执行，最终在内存中生成一个编译好的最终模板字符串。然后把这个模板字符串渲染为内存中的DOM。此时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去

7.beforeMount

这是第三个生命周期函数，表示模板已经在内存中编译完成，但尚未把模板渲染到页面中。

var vm = new Vue({

el: "#app",

data: {

msg: 'hello'

},

methods: {

show() {

console.log('show()');

}

},

beforeMount() {

console.log(document.getElementById("h3").innerText);//{{msg}}

}

})

在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串。创建vm.$el并替换掉'el'这一步，将内存中编译好的模板，真实地替换到浏览器的页面中去。

8.mounted

表示内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了

var vm = new Vue({

el: "#app",

data: {

msg: 'hello'

},

methods: {

show() {

console.log('show()');

}

},

mounted() {

console.log(document.getElementById("h3").innerText);//'hello'

}

})

mounted是实例创建期间的最后一个生命周期函数。当执行完mounted就表示，实例已经完全创建好了，此时若没有其它操作，这个实例就静静地躺在我们的内存中一动不动。此时组件脱离创建阶段进入运行阶段。

运行阶段

1.beforeUpdate

当且仅当data被修改时才触发这个生命周期函数，但此时仅仅是数据被修改，页面还未更新。

var vm = new Vue({

el: "#app",

data: {

msg: 'hello'

},

methods: {

show() {

console.log('show()');

}

},

beforeUpdate() {

console.log('界面上的元素的内容:'+document.getElementById("h3").innerText);//hello

console.log('data中的数据:'+this.msg);//hello world

}

})

2.更新虚拟DOM

根据data中的数据，在内存中重新渲染出一份虚拟DOM，当最新的内存DOM树被更新之后，会把最新的内存DOM树，重新渲染到真实的页面中去，此时完成数据从data(model层)->view(视图层)的更新

3.updated

Updated() {

console.log('界面上的元素的内容:'+document.getElementById("h3").innerText);//hello world

console.log('data中的数据:'+this.msg);//hello world

}

此时的data数据和页面已完成同步

销毁阶段

beforeDestory 和 destoryed

当执行beforeDestory钩子函数的时候，Vue实例就已经从运行阶段，进入到了销毁阶段。

当执行beforeDestory的时候，实例身上所有的data和所有的methods，以及过滤器、指令...都处于可用状态，此时还没有真正执行销毁过程。

当执行到destoryed函数的时候，组件已经被全部销毁了，data与methods均不可用。