谈谈你对虚拟DOM原理的理解？

什么是Virtual DOM

Virtual DOM是对DOM的抽象，本质上是JavaScript对象，这个对象就是更加轻量级的对DOM的描述.

为什么需要Virtual DOM

既然我们已经有了DOM,为什么还需要额外加一层抽象？

首先，我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢，更因为频繁变动DOM会造成浏览器的回流或者重回，这些都是性能的杀手，因此我们需要这一层抽象，在patch过程中尽可能地一次性将差异更新到DOM中，这样保证了DOM不会出现性能很差的情况.

其次，现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能，多人协作的项目中如果review不严格，可能会有开发者写出性能较低的代码，另一方面更重要的是省略手动DOM操作可以大大提高开发效率.

最后，也是Virtual DOM最初的目的，就是更好的跨平台，比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual DOM,因为Virtual DOM本身是JavaScript对象.

Virtual DOM的关键要素

Virtual DOM的创建

我们已经知道Virtual DOM是对真实DOM的抽象，根据不同的需求我们可以做出不同的抽象，比如

snabbdom.js的抽象方式是这样的.

当然，snabbdom.js由于是面向生产环境的库，所以做了大量的抽象各种，我们由于仅仅作为教程理解，因此采用最简单的抽象方法：

在明确了我们抽象的Virtual DOM构造之后，我们就需要一个函数来创建Virtual DOM.

这个函数很简单，接受一定的参数࿰