vue生命周期
- 第一个框框 new Vue() 表示开始创建一个Vue实例对象
var vm = new Vue()
- 第二个框框 表示刚初始化了一个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实例销毁。