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)
        }
      }
    }