vue diff算法与虚拟dom知识整理(4) h函数虚拟节点嵌套-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue diff算法与虚拟dom知识整理(4) h函数虚拟节点嵌套。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

那么先补充上文有一个没强调的点
h函数当你不需要属性时其实是可以不传的
例如我们打开案例打开 src下的index.js
修改代码如下

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

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
 
  //创建虚拟节点
  var vonm = h("duv","你好");

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,vonm);

声明标签为div 不需要任何标签属性因此我们就直接告诉他div 然后后面一个参数直接跟里面的文本程序也能识别我们运行项目
vue diff算法与虚拟dom知识整理(4) h函数虚拟节点嵌套
可以看到一切正常所以这个h函数还是很好用的

然后我们虚拟dom节点是可以嵌套虚拟dom节点的
简单说就是将一个虚拟dom节点作为另一个虚拟dom的子节点
h函数是可以嵌套的

这里就可以简单理解为 h函数声明了一个虚拟的 ul dom节点他的第二个参数没有传属性第三个参数直接给了个数组每个数组都是一个h函数声明出来的虚拟dom节点因此
就会成为他的子节点
vue diff算法与虚拟dom知识整理(4) h函数虚拟节点嵌套
这里我们将 src下的index.js代码更改如下

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

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li","C#")
  ]);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,xvul);

因为我们 ul 不需要标签属性啊所以 h函数的第二个参数就不穿了直接标签类型后面跟子节点的数组
然后每个子节点都是 h函数声明出来的 li虚拟节点同样他们也不需要标签属性就没有加第二个属性参数直接在后面跟文本内容了
然后我们运行项目
vue diff算法与虚拟dom知识整理(4) h函数虚拟节点嵌套
可以看到我们完整的一个无序列表就出来了

再有层次就一直往下套数组就好了
例如

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

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li",[
      h("div","嘻嘻哈哈")
    ])
  ]);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,xvul);

这样我们第三个 li 就里面又套了一个div
我们看界面效果
vue diff算法与虚拟dom知识整理(4) h函数虚拟节点嵌套
没有任何问题

可能有人会想我就一个节点也要搞个数组吗？
这个开发者也想到了
我们可以改成这样

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

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
  
  const xvul = h("ul",[
    h("li","java"),
    h("li","html"),
    h("li",h("div","嘻嘻哈哈"))
  ]);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,xvul);