虚拟 DOM 是什么? 有什么优缺点?

虚拟Dom本质上是一个js对象，它是对浏览器中真是Dom的一次抽象描述，Vue2 的 Virtual DOM 借鉴了开源库 snabbdom 的实现·。

如下所示：

<div class="warp" ><span>我是子元素</span></div>

const Vnode={
  tag:'div',
  props:{
       class:"warp"
       }
  children:[
      {
        tag:'span',
        props:{}
        children:['我是子元素']
   ]
}

在Vue中的h函数、render函数就是去createElement(tag,propos,childern)创建Vnode,React中的render函数返回的jsx模板实际上也是 React.createElement 的语法糖，再其内部筛选属性传递给ReactElement去创建Vnode。最终将Vnode渲染到页面中。

为啥Vue\React都在使用Vnode??

要明白为啥虚拟dom为啥如此"流行"，就得搞明白它要解决的问题。

浏览器中操作dom的代价是很昂贵的，每次dom的变更都可能会导致当前节点及其相关节点的重绘和重排。那什么又是重绘重排呢？当页面中的dom的样式属性发生变更或者是几何属性发生改变就会导致其部分渲染树甚至整个渲染树重新分析、计算组合成render tree去渲染，如果频繁的操作Dom就会导致页面频繁的大范围渲染，这个过程是非常消耗性能的。

为了解决这个问题，Vnode成了很好的解决方案。

在页面第一次渲染的时候，根据dom生成一次Vnode,再之后数据变更后再生成一份new Vnode,结合Diff 算法实现dom 批量的差异化更新，避免不必要的更新，减少页面频繁大幅度的重排重绘，保障性能下限。

Vnode优缺点

优点

保障性能，记住我这里说的是"保障",不是提升，因为使用虚拟dom首次渲染多了一层虚拟dom计算，如果dom结构复杂，计算过程也是比较耗时的，如果加之大量修改数据，Vnode的性能并无法实现明显的提升，只能说它有一个不错的性能下限优化。他的价值在别处【跨平台、无需手动操作Dom、提升开发效率】
减少手动操作 DOM、提升开发效率：我们不再需要⼿动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的⽅式更新视图，极⼤提⾼我们的开发效率；
兼容性好、很好的跨平台方案：虚拟 DOM 本质上是 JavaScript 对象,只要能运行js的地方就可以运行Vnode,⽽ DOM 与平台强相关，相⽐之下虚拟 DOM 可以进⾏更⽅便地跨平台操作，例如服务器渲染、weex 开发等等

缺点

次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢。