传统DOM与VUE框架更新视图的流程

313
  • 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

image.png