Vue为什么需要虚拟DOM


1.1 基本概念

基本上所有框架都引入了虚拟 DOM 来对真实 DOM 进行抽象,也就是现在大家所熟知的 VNode 和 VDOM

  • Virtual DOM 就是用 js 对象来描述真实 DOM,是对真实 DOM 的抽象,由于直接操作 DOM 性能低但是 js 层的操作效率高,可以将 DOM 操作转化成对象操作,最终通过 diff 算法比对差异进行更新 DOM(减少了对真实 DOM 的操作)。
  • 虚拟 DOM 不依赖真实平台环境从而也可以实现跨平台。

1.2 VDOM 是如何生成的 ?

  • 在 vue 中我们常常会为组件编写模板 - template
  • 这个模板会被编译器编译为渲染函数 - render
  • 在接下来的挂载过程中会调用 render 函数,返回的对象就是虚拟 dom
  • 会在后续的 patch 过程中进一步转化为 真实 dom。

1.3 VDOM 如何做 diff 的?

  • 挂载过程结束后,会记录第一次生成的 VDOM - oldVnode
  • 当响应式数据发生变化时,将会引起组件重新 render,此时就会生成新的 VDOM - newVnode
  • 使用 oldVnode 与 newVnode 做 diff 操作,将更改的部分应到真实 DOM 上,从而转换为最小量的 dom 操作,高效更新视图。

文章作者: 高红翔
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 高红翔 !
  目录