​

一、vue和react

在vue和react中，我们将大部分操作dom的事情交给了vue和react，从而使我们只需要关心操作数据即可。数据变化时，vue和react操作dom实现自动更新视图。每次更新视图的最小单位是组件。vue和react都使用了虚拟dom。

一、虚拟dom

1.是什么？

一个JavaScript对象，用来描述真实DOM。如：

const VNode= { tag:"div", attrs:{id:"app",...}, children:[ {tag:"p",...}, ... ], ... }

2.能做什么？

1. 降低（操作dom）成本，保障性能

       可以结合diff算法比较两个虚拟dom，从而找到这两个虚拟dom的相同点和不同点。

方式一： 通过比较新旧两个虚拟dom的差异（diff过程），先确定哪些部分变化了需要更新其真实的dom，再去更新真实dom。 方式二： 不管哪部变化了哪部分没变化，直接更新组件内所有的真实dom。 方式一与方式二相比，明显方式一更加合理，成本更低性能更好，所以虚拟dom能够保障合理的性能。

2.跨平台支持

由于虚拟dom本质上是JavaScript对象，与平台无关，因此可以实现跨平台，不同平台共用一套虚拟dom，达到跨平台的效果。

3.优缺点

优点： 1. 保障性能（合理的操作dom，减少不必要的dom操作） 2. 跨平台（具有兼容性） 3. 减少手动操作dom（提升开发效率） 缺点： 1. 额外的计算：虚拟 DOM 的计算（消耗时间） 2. 额外的内存：虚拟dom的内存占用（消耗内存） 有得必有失，就像在稿纸上计算数学题，虽然减少了人脑的负担，但也必然需要额外的时间（用手写字的时间）和额外的墨水（墨水的消耗）。

二、图例

1.vue组件

2. 假设没有虚拟dom

3. 有虚拟dom