虚拟DOM概念为我们带来的变化

从react 推出虚拟DOM概念,从VUE、avalon、angularjs、knockout 等等框架产生了巨大的影响。迫使他们进行大量的重构，大版本升级.

那很多人也想知道虚拟DOM主要是干嘛？估计很多在网上搜过知道大概的原理和作用。那如果让你去设计一个框架用它具体干些什么的时候。你知道怎么做？

我的理解：当你的框架有大量操作DOM或者频繁操作DOM的时候应该要考虑一下性能的影响，是否采用虚拟DOM进行差异化比较渲染.

我们也知道一个页面就是一个巨大DOM树，它有很多分支，而且分支的深度未知，DOM有很多计算属性。就跟我们MVVM框架那种属性一种。当然它更复杂。你一访问它就会造成大量的运算，相当耗性能.

那有些运算我们是否可以在虚拟DOM上面，先进行演练计算，计算完毕再一次性渲染到页面。这种的性能会快很多。

例如以前MVVM框架渲染DOM的方式:

先找上下文所有带有指令的DOM，然后解析指令，然后绑定指令，再对指令绑定对应的表达式添加依赖。当数据源或DOM发变化，会具体由指令进行相关事物操作。例如较复杂的钳套for 循环指令，需要大量的代码去处理DOM

现在的MVVM框架采了虚拟DOM方式:

先找到上下文，获取它的HTML代码(OuterHTML),再对HTML进行解析组合成虚拟DOM树结构的对象(例如React的JSX 其实跟这个也是一样的道理，最后react 把jsx 解析成虚拟DOM树)，最后对虚拟对象进行动态脚本编译，在编译的过程就实现了很多复杂指令.具体例子

例如:createVElement(tag,attr,children) 别名_c

var root={tag:'div',children:[{tag:div,{'v-for':'(item,index)in list'},'item.name']}

var for=function(data,callback){   return data.map((l,index)=>callback(l,index)) }

var code=new Function('data','with(data){ return  _c('div',for(list,function(item,index){   return _c('div',null,item.name )})) }')  // 编译动态脚本，缓存code

code({list:[{name:"呵呵"}]})  // 最后这样一执行就创建了一个虚拟DOM树最后渲染到页面中，当然了，比如List 发生变化了。再执行code 得到最新的虚拟DOM树。然后拿最新的和上一个作差异化比较，就能知道哪个地方变动了，只去局部更新那一部分。