解释下什么是虚拟DOM

解释下什么是虚拟DOM

先说说为什么有虚拟ODM 当我们操作页面浏览器会疯狂的重构和重绘，大部分的浏览器的性能都是这么消耗

虚拟DOM 分为三部，

1. 渲染函数 ，用于生成虚拟DOM
2. vnode 虚拟dom的数据结构完全可以做到代编一个真实的节点
3. patch 算法 将vnode 渲染成真实的dom然后在铺在页面上

虚拟dom是啥 一个对象 vnode对象可能层级机构比较深 至少包含了三个属性 tag attr child

虚拟dom作用 最终的作用还是要渲染view，但是如果一个根节点变换的话，不至于整个dom结构全部更换，这个时候我们需要diff对比

为什么现在这么流行虚拟dom

• 跨平台的优势，把所有的dom节点当作js之后无论是跨平台还是都会更好

• js速度当然比原生dom快

• 提升渲染性能 仅在同级的vnode里面进行diff ，递归进行同级的diff

diff算法实现

function createElement(vnode) {
  const { tag, attrs, children } = vnode
  const ele = document.createElement(tag)
  if(children) {
    children.forEach(item => {
      ele.appendChild(createElement(item))
    })
  }
  return ele
}

function updateChild(vnode, newVnode) {
  var children = vnode.children || []
}