那么 先補充上文有一個沒強調(diào)的點
h函數(shù) 當你不需要屬性時 其實是可以不傳的
例如 我們打開案例 打開 src下的index.js
修改代碼如下

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //創(chuàng)建patch函數(shù)
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
 
  //創(chuàng)建虛擬節(jié)點
  var vonm = h("duv","你好");

  //讓虛擬節(jié)點上樹
  const container = document.getElementById('container');
  patch(container,vonm);

聲明標簽為div 不需要任何標簽屬性 因此 我們就直接 告訴他div 然后后面一個參數(shù)直接跟里面的文本 程序也能識別 我們運行項目

可以看到 一切正常 所以 這個h函數(shù)還是很好用的

然后 我們虛擬dom節(jié)點是可以嵌套虛擬dom節(jié)點的
簡單說 就是 將一個虛擬dom節(jié)點作為另一個虛擬dom的子節(jié)點
h函數(shù)是可以嵌套的

這里 就可以簡單理解為 h函數(shù) 聲明了一個虛擬的 ul dom節(jié)點 他的第二個參數(shù)沒有傳屬性 第三個參數(shù) 直接給了個數(shù)組 每個數(shù)組都是一個h函數(shù)聲明出來的虛擬dom節(jié)點 因此
就會成為他的子節(jié)點

這里 我們將 src下的index.js代碼更改如下

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //創(chuàng)建patch函數(shù)
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li","C#")
  ]);

  //讓虛擬節(jié)點上樹
  const container = document.getElementById('container');
  patch(container,xvul);

因為我們 ul 不需要標簽屬性啊 所以 h函數(shù)的第二個參數(shù)就不穿了 直接 標簽類型 后面跟子節(jié)點的數(shù)組
然后 每個子節(jié)點都是 h函數(shù)聲明出來的 li虛擬節(jié)點 同樣 他們也不需要標簽屬性 就沒有加第二個屬性參數(shù) 直接在后面跟文本內(nèi)容了
然后 我們運行項目

可以看到 我們完整的一個無序列表就出來了

再有層次 就一直往下套數(shù)組就好了
例如

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //創(chuàng)建patch函數(shù)
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li",[
      h("div","嘻嘻哈哈")
    ])
  ]);

  //讓虛擬節(jié)點上樹
  const container = document.getElementById('container');
  patch(container,xvul);

這樣 我們第三個 li 就里面又套了一個div
我們看界面效果

沒有任何問題

可能有人會想 我就一個節(jié)點 也要搞個數(shù)組嗎？
這個 開發(fā)者也想到了
我們可以改成這樣

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //創(chuàng)建patch函數(shù)
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li",h("div","嘻嘻哈哈"))
  ]);

  //讓虛擬節(jié)點上樹
  const container = document.getElementById('container');
  patch(container,xvul);

效果是一樣的

多個時 用數(shù)組
單個時 你可以用數(shù)組 但也可以直接寫個h函數(shù)聲明的虛擬節(jié)點上去 肯定是后者看著更友好一點

好 h函數(shù)就很靈活 這個大家也都感受到了

這樣 我下一文就會來講一下這個h函數(shù)文章來源地址http://www.zghlxwxcb.cn/news/detail-433825.html

到了這里，關(guān)于vue diff算法與虛擬dom知識整理(4) h函數(shù)虛擬節(jié)點嵌套的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！