试着去理解虚拟DOM

去掉虚拟两个字，先了解下什么是DOM？

在原生JS中有DOM操作，就是使用浏览器提供的一些API，选中一个元素对它进行操作，比如说：增加一个属性、增加一个孩子、修改它里面的内容、改变它的位置，直接对DOM操作。这个DOM实际上对应的就是浏览器里面你所能看的见的对应的某个元素。

那什么是虚拟DOM

假设我们要操作一个数据的报表，这个报表大概有几百条数据，我们要对这个报表进行一个排序的操作

我们有这样一个表格，这里面大概有100多项

姓名	年纪	分数	等等
小红	12	44
小花	13	78

当我去点年纪的时候，希望年纪里的所有DOM元素可以按照年纪去排序，当我点新增的时候会在表格下面再新增一行数据，当我点击姓名的时候所有DOM按照姓名去做一个排序，我们可以想下用原生JS怎么去做排序，用JS去对DOM结构去排序，操作起来很难实现，也很麻烦。
后来我们有了MVVM框架可以对数据排序，数据对应到页面上的DOM结构，我们只需要对数据排序，那里面的DOM结构自然就排序了。
我们自己实现一个框架，假设数据变了，那我们的DOM结构也就变了，难道我们需要把数据重新渲染一次，如果用户频繁大量改动数据，DOM也会频繁改动，就会造成卡顿，那我们可以去做一些优化，怎么去做优化呢？
那我们可以像计算机内存那样，我们可以自己设定一个虚拟的数据结构，它是对真实的DOM结构是一一对应的，我们可以先对虚拟的数据结构进行操作，等全部操作完成了，再把它渲染成真实的DOM，那就变成了真实的数据。

那这样做有什么好处呢？

假设用户只做了微小的改动，比如增加了2条数据，那我们可以想打补丁一样，只把这两条加到真实的DOM里，而不用把整个DOM重新渲染。

那这是虚拟DOM以及他的作用

那虚拟DOM就是针对真实DOM做的一个一一映射的类似虚拟的数据结构，有了变化再把数据结构渲染到DOM里，做到局部的变化，实现行能优化。

那我们怎么实现它呢

以下代码为将数据结构如何转化为虚拟DOM，然后将虚拟DOM渲染到页面中变成真正的DOM。

plaintext


class VNode {
  constructor(tag, children, text) {
    this.tag = tag
    this.text = text
    this.children = children
  }

  render() {
    if(this.tag === '#text') {
      return document.createTextNode(this.text)
    }
    let el = document.createElement(this.tag)
    this.children.forEach(vChild => {
      el.appendChild(vChild.render())
    })
    return el
  }
}

function v(tag, children, text) {
  if(typeof children === 'string') {
    text = children
    children = []
  }
  return new VNode(tag, children, text)
}


/*
//虚拟的JSON格式的数据结构
let nodesData = {
  tag: 'div',
  children: [
    {
      tag: 'p',
      children: [
        {
          tag: 'span',
          children: [
            {
              tag: '#text',
              text: 'hi'
            }
          ]
        }
      ]
    },
    {
      tag: 'span',
        children: [
          {
            tag: '#text',
            text: 'oo'
          }
        ]
    }
  ]
}

 */


let vNodes = v('div', [
      v('p', [
        v('span', [ v('#text', 'hi') ] )
        ]
      ),
      v('span', [
        v('#text',  'oo')
        ])
    ]
  )
console.log(vNodes.render())

什么是diff

我们需要做一些改变的时候，比如增删改查，那么我们需要将改变后的虚拟DOM树与真实的DOM树做对比，找出差异，然后做到局部更新改变的地方，那么找出差异就是diff（算法找两棵DOM树的差异）。

以下代码为简单的实现 DOM diff