虚拟dom

1.什么是虚拟dom？
vdom是什么？
它是一个Object对象模型，用来模拟真实dom节点的结构
需求： vdom如何模拟真实dom，如果将来我想在增加一个li，里的内容为 ： hello，world
在增加10个li,内容为： xxx

  <div class = "box">
    <ul>
      <li> vdom</li>
    </ul>
  </div>

  var list = document.querySelector( '.list' )
  var li = document.createElement( 'LI' )
  li.innerHTML = ' hello，world '

  list.appendChild( li )

vdom的使用流程

1.获取数据（ ajax fetch ）
var data = {
id: 1,
name: ‘1903’
}

// 2. 创建vdom
var vdom = {
tag: ‘div’,
attr: {
className: ‘box’
},
content: [
{
tag: ‘ul’,
content: [
{
tag: ‘li’,
content: data.name
}
]
}
]
}

//3. 初次渲染 vdom( vdom渲染成  真实dom )

  // var div = document.createElement('DIV')
  // div.className = 'box'
  // var ul = document.createElement('UL')
  // var li = document.createElement('LI')

// vue中使用的是一个叫做jsx语法  +  render函数


  // render 函数进行渲染

  // 但是我们的网页结构一般都是很复杂的，这时我们使用vdom去模拟dom结构，发现vdom这个对象模型
  // 太大了，也长了，所以我们想，如果能在js中也能够书写 dom标签结构那就好了，所以结合了javascript + xml  搞出了一个新的语法糖   jsx ，用jsx来模拟vdom

  /* 
     <div class = "box">
        <ul>
          <li> {{ data.name }} </li>
        </ul>
      </div>
  */