浅析虚拟DOM

对于我们学习vue和react框架的童鞋们来说，虚拟DOM绝不是一个生疏的东西，对于我们使用的MVVM（m:是model层；v:是视图层；vm:是model层和view层中间的一个映射层）渲染中虚拟DOM常常被使用到，但具体是如何使用的，我们却不是很清楚，现在我将跟大家说说我的理解。

什么是虚拟DOM

虚拟DOM其实就是一个JS对象，用它来描述真实DOM

在我们书写react实例中，首先我们先有了state，即先有了数据

this.state={
	app:"hello app"
} 

然后我们要开始书写render函数，也就是用jsx语法去书写页面中我们需要的声明

<div><span>{{this.state.app}}</span></div>

这里react会自动帮你处理，等同于我们写：

React.createElement(
  'div',
   React.createElement('span', {}, 'hello app')
)

这时react会将我们写的JSX也就是模板语法+数据根据上述方法生成一个虚拟DOM ，虚拟DOM通常有3个参数，第一个是标签名，第二个是标签上的属性（无可以不写），第三个是标签包裹的内容，如上段代码

然后react将用虚拟DOM的结构生成真实的DOM来显示内容，当state发生变化，数据+模板生成了新的虚拟DOM

this.state={
	app:"hello world"
} 

React.createElement(
  'div',
   React.createElement('span', {}, 'hello world')
)

比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容，这个时候就涉及到了diff算法（同级比较，就近复用），diff会进行两个虚拟dom之间根据DOM节点的同层比对，一旦发现有一层不一样，就会连底下的节点一起重新渲染真实DOM，改变span中的内容。

简单总结下：

虚拟DOM的原理

简单概括有三点：

用JavaScript模拟DOM树，并渲染这个DOM树

比较新老DOM树，得到比较的差异对象

把差异对象应用到渲染的DOM树。

虚拟DOM的优点

虚拟DOM不会进行排版与重绘

虚拟DOM会进行频繁的修改然后一次性对比并修改真实的DOM中需要修改的部分

虚拟DOM可以只渲染局部