1. 纯js比操作DOM快很多很多

2. 由于前后端分离，导致前端会更频繁的操作DOM

3. MVVM框架的流行

所有对DOM的操作转化为对js对象的操作

通过diff计算出对DOM操作的最小集

进而更新DOM

VDOM实际上就是一个js对象

function Element (tagName, props, children) {
  this.tagName = tagName
  this.props = props
  this.children = children
}

Element.prototype.render = function () {
  var el = document.createElement(this.tagName) // 根据tagName构建
  var props = this.props

  for (var propName in props) { // 设置节点的DOM属性
    var propValue = props[propName]
    el.setAttribute(propName, propValue)
  }

  var children = this.children || []

  children.forEach(function (child) {
    var childEl = (child instanceof Element)
      ? child.render() // 如果子节点也是虚拟DOM，递归构建DOM节点
      : document.createTextNode(child) // 如果字符串，只构建文本节点
    el.appendChild(childEl)
  })

  return el
}

var el = function(tagName, props, children){
	return new Element (tagName, props, children);
}
var ul = new el('ul', {id: 'list'}, [
  el('li', {class: 'item'}, ['Item 1']),
  el('li', {class: 'item'}, ['Item 2']),
  el('li', {class: 'item'}, ['Item 3'])
])
var ulRoot = ul.render()
document.querySelector('#container').appendChild(ulRoot)