Vue生命周期

vue生命周期

1. 第一个框框 new Vue() 表示开始创建一个Vue实例对象

var vm = new Vue()

2. 第二个框框 表示刚初始化了一个vue空的实例对象，这个对象上，只有默认的一些生命周期函数和默认的事件，其他的东西都未创建。
3. 第一个生命周期函数 beforeCreate ，在这个函数执行时，data和methods中的数据都还没有初始化。
4. 下一个框框 进行初始化
5. 第二个生命周期函数 created ，在created中data和method都已经初始化好了。如果要调用method中的方法或操作data中的数据最早只要在created中操作。
6. 第一个绿色的大框框，这个部分表示开始编译模板，把vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终模板字符串。
   然后把这个模板字符串渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去。
7. 在beforeMount 这个函数执行时，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。
8. 下一个框框 这一步将内存中编译好的模板，真实的替换到浏览器页面中去。
9. mounted 如果通过插件操作DOM最早要在mounted中进行。
10. 第二个绿色的大框框，是运行阶段，执行次数根据data数据的改变决定，最少0次。
11. 当执行beforeUpdate时，页面中的显示的数据还是旧的，data是新的。
12. Virtual DOM re-render and patch ，先根据data中最新的数据重新渲染出一份最新的内存DOM树，当最新内存DOM树被更新，会把最新内存DOM树重新渲染到页面中去，这时，就完成了data(Model) → view(视图)更新。
13. updated 页面和data数据保持同步。
14. 执行beforeDestory时，实例身上所有data、methods以及过滤器、指令都处于可用状态，此时还没有真正销毁。
15. destoryed vm实例销毁。