一看就懂得Vue生命周期

上图

生命周期vue.png

1、创建vue实例，Vue();
2、在创建Vue实例的时候，执行了init()，在init过程中首先调用了beforeCreate钩子函数；
3、同时监听data数据，初始化vue内部事件，进行属性和方法的计算；
4、以上都干完了，调用Created钩子函数；　
5、模板编译，把data对象里面的数据和vue语法写的模板编译成HTML。编译过程分三种情况：1）实例内部有template属性，直接调用，然后调用render函数去渲染；2）没有该属性调用外部html；3）都没有抛出错误；
6、编译模板完成，调用beforeMount钩子函数；
7、render函数执行之后，将渲染出来的内容挂载到DOM节点上；
8、挂在结束，调用Mounted钩子函数；
9、数据发生变化，调用beforeUpdate钩子函数，经历virtual Dom；
10、更新完成，调用Updated钩子函数；
11、beforeDestory销毁所有观察者、组件及事件监听；
12、Destoryed实例销毁