vdom

• vdom是什么？为何会存在vdom?

virtual dom，虚拟DOM，用JS模似DOM结构。DOM变化的对比，放在JS层来做（图灵完备语言），提高重绘性能。DOM操作是“昂贵”的，js运行效率高。

     jQuery渲染

var data = [
    {
      name: "AA",
      sex: "女",
      add: "北京"
    },
    {
      name: "BB",
      sex: "男",
      add: "上海"
    }
  ]
  function render(data) {
    var $container = $('#container')
    // 清空容器，重要！！
    $container.html('')

    // 拼接table
    var $table = $('<table>')
    $table.append($('<tr><th>姓名</th><th>性别</th><th>区域</th></tr>'))
    data.forEach(function(item){
      $table.append($('<tr><td>'+ item.name +'</td><td>'+ item.sex +'</td><td>'+ item.add +'</td></tr>'))
    })
    // 渲染到页面
    $container.append($table)
  }
  function change() {
    data[0].add = '朝阳'
    data[1].name = 'CC'
    // re-render 再次渲染
    render(data)
  }
  render(data)

　　snabbdom渲染

<div id="container">
  </div>
  <button onclick="change()">change</button>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.min.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.min.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.min.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.min.js"></script>
  <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.js"></script>
  <script>
    var data = [
      {
        name: "AA",
        sex: "女",
        add: "北京"
      },
      {
        name: "BB",
        sex: "男",
        add: "上海"
      }
    ]

    // 把表头也放在 data 中
    data.unshift({
      name: '姓名',
      sex: '性别',
      add: '区域'
    })

    var snabbdom = window.snabbdom

    // 定义 patch
    var patch = snabbdom.init({
      snabbdom_class,
      snabbdom_props,
      snabbdom_style,
      snabbdom_eventlisteners
    })

    // 定义 h
    var h = snabbdom.h
    var container = document.getElementById('container')

    // 渲染函数
    var vnode
    function render(data) {
      var newVnode = h('table', {}, data.map(function(item){
        var tds = []
        var i 
        for (i in item) {
          if (item.hasOwnProperty(i)){
            tds.push(h('td', {}, item[i] + ''))
          }
        }
        return h('tr', {}, tds )
      }))
      if (vnode) {
        // re-render
        patch(vnode, newVnode)
      } else {
        // 初次渲染
        patch(container, newVnode)
      }
      // 存储当前的 vnode 结果
      vnode = newVnode
    }

    //初次渲染
    render(data)

    function change () {
      data[1].add = '朝阳'
      data[2].name = 'CC'
      // re-render 再次渲染
      render(data)
    }
</script>

• vdom如何应用，核心API是什么？

核心API：h函数、patch函数

.h('<标签名>',{...属性...},[...子元素...])

.h('<标签名>,',{...属性...},'...')

.patch(container, vnode)

.patch(vnode, newVnode)

• 介绍diff算法

diff算法非常复杂，源码量很大。