Vue生命周期
程序员文章站
2024-02-11 19:31:16
...
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实例销毁。