浅析虚拟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发生变化，数据&