diff 算法 和 虚拟 DOM

一：虚拟DOM

虚拟DOM 它是虚拟的，只在概念里面存在。比如一段vue 代码

    <template>
      <div id='wrapper'>
        <p><span>111</span></p>
        <h4>333</h4>
        <div class='content'>222</div>
      </div>
    </template> 

// 用js表示DOM树
    // children: 用数组表示 子节点
    // props: 属性
    // dom: 节点类型
    var vNode = {
      dom: 'div',
      props: {
        id: 'wrapper'
      },
      children: [{
        dom: 'p',
        children: [{
          dom: 'span'
        }]
      },{
        dom: 'h4'
      },{
        dom: 'div',
        props: {
          class: 'content'
        }
      }]
    }

diff 算法工作流程

function patchNode(oldNode, vNode) {
      // 先拿出真实DOM
      const el = oldNode.el = vNode.el
      // 分别拿出老节点的子元素 新节点的子元素
      let oldCh = oldNode.children
      let newCh = vNode.children
      // 如果新老节点相同，则不进行任何操作
      if (oldCh === newCh)  return
      // 分情况操作 
      // 1. 只有文字节点
      // 2. 删除子元素
      // 3. 增加子元素
      // 4. 改变子元素
      const textCheck = (oldCh.textNode !== null) && (newCh.textNode !== null) && (oldCh.textNode !== newCh.textNode)
      if (textCheck) {
        api.setextContent(el, vode.text) // 文字节点更新 api
      } else {
        // 如果心老节点都存在子元素 并且不相等 说明子元素变动
        if(oldCh && newCh && newCh !== oldCh) {
          updateChildren()
        } else if (oldCh) {
          // 只有老节点存在子元素，说明删除
          api.removeChild(el)
        } else if (newCh) {
          // 只有新节点存在子元素 说明增加
          createEl(newCh)
        }
      }
    }