Vue 为什么需要虚拟 DOM

• Vue 为什么需要虚拟 DOM
  • 基本概念
  • 补充:VDOM 是如何生成的?
  • 再次补充:VDOM 如何做 diff 的?
  • 总结

Vue 为什么需要虚拟 DOM

基本概念

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

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

补充:VDOM 是如何生成的?

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

再次补充:VDOM 如何做 diff 的?

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

更多详细内容，请微信搜索“前端爱好者“， 戳我 查看 。

总结

Vue需要虚拟DOM的主要原因是为了提高性能和优化渲染过程。

虚拟DOM是一个轻量级的JavaScript对象，它对应着真实的DOM结构。当Vue中的数据发生变化时，Vue会先使用虚拟DOM进行计算和比较，然后才会将变化的部分更新到真实的DOM中。

使用虚拟DOM可以有效地减少直接操作真实DOM所带来的性能损耗。相比于直接对真实DOM进行频繁的操作和更新，Vue通过对比虚拟DOM的差异，只对需要更新的部分进行最小化的操作，从而减少不必要的DOM操作，提高页面的渲染效率。

此外，虚拟DOM还具有跨平台的能力。由于虚拟DOM是基于JavaScript对象的，它可以在不同的环境中运行，比如浏览器、服务器端或移动端。这使得Vue具备了更广泛的应用场景，并且可以在不同的平台上进行统一的开发和测试。

Vue使用虚拟DOM的目的是为了：

• 提高性能
• 优化渲染过程
• 并实现跨平台的能力。

通过使用虚拟DOM，Vue能够以更高效的方式更新和渲染页面，提供更好的用户体验。