[vue] 什么是虚拟DOM？

[undefinedYu]

[vue] 什么是虚拟DOM？

[sunyxq]

个人浅显理解：VNode是真实DOM的映射，其数据结构是普通JS对象，包含type(类型，是组件还是元素)，style，class，children(子组件或子元素)，data(数据模型)等属性，以树的形式嵌套。
参考--渲染器

[mengfei2611]

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树，那么每次 dom 的更改就变成了 js 对象的属性的更改，这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

[CoderNanT]

虚拟DOM是:用JS来模拟一颗 DOM 树,放在浏览器内存中
当你要改变时,虚拟 DOM 使用 diff 算法进行 新旧虚拟 dom 的比较将修改了的更新到实际的 DOM 树,减少了 DOM 操作

[radio-qq]

结合前面大佬的，组织下自己的话：
相当于真实dom树的映射，用js对象嵌套方式来表示dom树，更新数据时，diff算法先进行新旧虚拟dom的比较修改，再将结果更新到实际的dom树去，减少了dom操作、计算损耗，提高性能

[flashyy]

virtual DOM 虚拟DOM，用普通js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。

虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的，在react，vue等技术出现之前，我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构，来达到更新 ui 的目的。

这种方式相当消耗计算资源，因为每次查询 dom 几乎都需要遍历整颗 dom 树，如果建立一个与 dom 树对应的虚拟 dom 对象（ js 对象），以对象嵌套的方式来表示 dom 树及其层级结构，那么每次 dom 的更改就变成了对 js 对象的属性的增删改查，这样一来查找 js 对象的属性变化要比查询 dom 树的性能开销小。
原文：
https://blog.csdn.net/liuliuliuliumin123/article/details/107943687

[yxllovewq]

虚拟DOM：使用对象的结构来抽象化真实的DOM，VUE通过DIFF算法比较更新前后的两个虚拟DOM的差异，将差异最终反馈到真实的DOM上。
查阅vue使用虚拟DOM的原因，发现并不是因为虚拟DOM能显著提高页面渲染性能，而更多的是使用虚拟DOM可以，在转化成真实DOM之前，做一些处理来解决一些特殊的问题，并且抽象后的DOM对象可以使得其他编程语言能通过虚拟DOM操作真实DOM了，也即实现了跨平台。

[thefirst-ma]

[vue] 什么是虚拟DOM？

1. 对真实DOM的抽象化，存储真实DOM节点的标签、属性、事件
2. 利用虚拟DOM可以控制视图渲染时对新旧节点的比对，有利于提高性能
3. 为函数式的 UI 编程 + 其他 backEnd(RN)

[Cai-zhiji]

Virtual Dom虚拟dom的定义

虚拟DOM（Virtual DOM）是一种用于提升前端框架性能的概念和技术。它是在内存中以JavaScript对象的形式存在的轻量级的DOM表示。虚拟DOM可以作为真实DOM的一种抽象，用于描述页面的结构和状态。

工作原理

初始化：在应用加载时，通过解析组件的模板或JSX，创建虚拟DOM树的初始表示。
更新：当应用的状态发生改变时，重新构建整个虚拟DOM树，并与之前的虚拟DOM树进行比较。
比较：通过算法比较新旧两棵虚拟DOM树的差异（也称为差异补丁或变更集）。
批量更新：根据差异，只对真正需要更新的部分进行操作，以最小化对真实DOM的操作次数。
应用更新：将更新后的虚拟DOM树应用到真实DOM中，使界面与最新的状态保持一致。

优势

虚拟DOM的优势在于它可以提供更高效的DOM操作。通过在内存中进行比较和操作，减少了直接操作真实DOM的次数，从而减少了昂贵的DOM操作和重绘的开销。虚拟DOM可以批量处理变更，并通过高效的算法找到最小化的变更集，使得界面的更新更加快速和高效。

另外，虚拟DOM还提供了跨平台的能力。由于虚拟DOM是以JavaScript对象的形式存在，可以在不同的平台上运行，例如浏览器、移动端和服务器端。这使得使用同一套代码来构建不同平台的应用变得更加容易。