Vue生命周期

第一个框框 new Vue() 表示开始创建一个Vue实例对象
var vm = new Vue()
1
第二个框框 表示刚初始化了一个vue空的实例对象，这个对象上，只有默认的一些生命周期函数和默认的事件，其他的东西都未创建。
第一个生命周期函数 beforeCreate ，在这个函数执行时，data和methods中的数据都还没有初始化。
下一个框框 进行初始化
第二个生命周期函数 created ，在created中data和method都已经初始化好了。如果要调用method中的方法或操作data中的数据最早只要在created中操作。
第一个绿色的大框框，这个部分表示开始编译模板，把vue代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终模板字符串。
然后把这个模板字符串渲染为内存中的DOM，此时，只是在内存中渲染好了模板，并没有把模板挂载到真正的页面中去。
在beforeMount 这个函数执行时，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。
下一个框框 这一步将内存中编译好的模板，真实的替换到浏览器页面中去。
mounted 如果通过插件操作DOM最早要在mounted中进行。
第二个绿色的大框框，是运行阶段，执行次数根据data数据的改变决定，最少0次。
当执行beforeUpdate时，页面中的显示的数据还是旧的，data是新的。
Virtual DOM re-render and patch ，先根据data中最新的数据重新渲染出一份最新的内存DOM树，当最新内存DOM树被更新，会把最新内存DOM树重新渲染到页面中去，这时，就完成了data(Model) → view(视图)更新。
updated 页面和data数据保持同步。
执行beforeDestory时，实例身上所有data、methods以及过滤器、指令都处于可用状态，此时还没有真正销毁。
destoryed vm实例销毁。
————————————————
版权声明：本文为CSDN博主「Embrace__」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Embrace__/article/details/96479314