snabbdom

• 是什么：snabbdom是著名的虛擬DOM庫，是diff算法的鼻祖，Vue源碼借鑒了snabbdom

虛擬DOM

• 是什么：本質上是存在內存里的 JavaScript 對象

• 作用：用來描述真實DOM的層次結構，真實DOM上的一切屬性都能在虛擬DOM上找到對應的屬性，并且diff算法也是作用在虛擬DOM上的

• 怎么用（如何產(chǎn)生）：用h函數(shù)可以生成虛擬DOM

  // 調用h函數(shù)
  h('p', {}, 'aaa');
  // 得到以下的虛擬DOM
  { "sel": "p", "data": {}, "text": "aaa" }
  // 真實DOM如下
  <p>aaa</p>
  

  • h函數(shù)代碼如下

    import vnode from "./vnode";// 低配版h函數(shù)，必須接受三個參數(shù)（生成vnode）
    // 形態(tài)如下：
    /* ① h('div', {}, '文字')② h('div', {}, [])③ h('div', {}, h('div', {}, '文字'))
    */
    export default function (sel, data, c) {if (arguments.length !== 3) throw new Error("對不起，傳入的參數(shù)必須為3個");if (typeof c === "string" || typeof c === "number") {// 符合第①種形態(tài)return vnode(sel, data, undefined, c, undefined)} else if (Array.isArray(c)) {// 符合第②種形態(tài)let children = [];for (let index = 0; index < c.length; index++) {const element = c[index];// 如果不是h()if (!(typeof element === "object" && element.hasOwnProperty("sel"))) {throw new Error("對不起，傳入的參數(shù)有誤");}children.push(element);}return vnode(sel, data, children, undefined, undefined);} else if (typeof c === "object" && c.hasOwnProperty("sel")) {// 符合第③種形態(tài)let children = [c]return vnode(sel, data, children, undefined, undefined);} else {throw new Error("對不起，傳入的參數(shù)有誤");}// return vnode(sel, data, children, undefined, undefined);
    }
    

diff算法

• 是什么：一種作用于虛擬DOM上的算法

• 作用：通過在虛擬DOM上進行精細化比較，從而達到最小量更新真實DOM的效果

• diff算法是怎么做的

  • diff算法只在同一層進行比較，不同層的話會直接暴力刪除舊的，插入新的

  • diff算法對同一個虛擬節(jié)點進行精細化比較，也就是選擇器和key相同的虛擬節(jié)點。

  • diff算法的比較如下圖