-
1、传统DOM框架更新视图的流程
- 遍历DOM树获取DOM对象
- 确认需要操作的视图属性(就是需要修改dom的哪个属性)
- 更改对象的属性触发视图更新
- 视图执行一次更新
- ......(重复上面的工作)
- 更改对象的属性触发视图更新
- 视图执行一次更新
- 所有视图内容更新完毕
就是需要修改多个dom属性的时候,每一次更改一个dom属性就会触发视图的更新;由于dom更新的时候,是默认按照同步的方式进行更新的
例子:当修改dom的4个文本框时,修改第一个文本框时,当代码执行到第一个修改value值时,就会执行一次试图更新,更新完毕后就会检测到第二个文本框变更,又继续执行一次视图更新。直到4个文本框的值都改完了,那么视图更新完毕
2、Vue框架更新视图的流程
- 初始化框架构建虚拟DOM树
- 将响应式数据对象映射到虚拟DOM树中
- 更改需要更新的属性
- 更改需要更新的属性
- .......(重复上面的工作)
- 将更新队列中的任务一次进入虚拟DOM中
- 将虚拟DOM中需要变更的部分一次设置到DOM对象中
Vue会监听你要修改dom的所有属性,当你改完所有的属性后,就比如4个文本框改4次值,Vue就会把要改的步骤放到一个任务队列中,先把虚拟树改了,改完后一次性把这个更新映射到真实dom上
3、对比总结
通过对比得知传统的DOM框架采用的视图更新机制是同步方式进行的,所以一旦涉及到DOM操作,在JS部分只要更改一个DOM属性就会触发DOM树进行一次渲染,当页面有N步数据更新的时候就算N步数据是同时更改的,视图部分也会进行N次渲染。
而Vue框架是采用非直接DOM操作的方式进行页面渲染,这样可以将视图更新时的多次更改放到一个任务队列中,最终将本次更改的N次变化统一由一次渲染替换真实的DOM对象,这样可以实现N次变更,一次渲染,在性能上更优于传统的DOM框架。
- 响应式视图更新
- 多次更改一次渲染
- 无需直接操作DOM