Diff 算法中h 函数

1： h 函数用来产生虚拟节点（vnode）

虚拟节点（vnode） 有哪些属性： 

{
  children: undefined;  // 子元素
  data: {};  // 属性,  样式
  elm: undefined;  // 对应真正dom节点, 如果为undefined 表示DOM节点为上树
  key: undefined;  // 这个节点的唯一标识,  (v-for 循环遍历： key值的作用：服务于最小更新的)
  sel: undefined;  // 表示选择器
  text: undefined;  // 文本
}

snabbdom: 库

import { init } form 'snabbdom/init';
import { classModule } form 'snabbdom/module/class';
import { propsModule } form 'snabbdom/module/props';
import { styleModule } form 'snabbdom/module/style';
import { eventListenersModule } form 'snabbdom/module/eventlistenersModulers';
import { h } from 'ansbbdom/h';
// 创建patch 函数   patch 函数是diff 算法核心函数
const patch = init([classModule, propsModule, styleModule, eventListenersModule]);

// 创建虚拟节点
const vnode1 = h{'a', {
     props: {
        href: 'https://baidu.com';
        target: '_blank'
       }
     }, '百度'}

// patch 函数接受两个参数: 第一个参数(dom节点);  第二个参数: (vnode) 虚拟节点
// 让虚拟节点上树
// 首先创建container 
const container = document.getElementById('container');
patch(container, vnode1)

h 函数可以嵌套使用， 从而得到虚拟DOM树

1: 比如这样嵌套函数
h('ul',{}, [
   h('li', {}, '牛奶'),  // h 函数用于创建vnode 节点
   h('li', {}, '咖啡'),
   h('li', {}, '可乐'),
])

// 2: 得到这样的虚拟DOM 树
{
  "sel": "ul",
  "data": {},
  "children": {
     { se:"li", text: "牛奶" },
     { se:"li", text: "咖啡" },
     { se:"li", text: "可乐" }
  }
} 

// h 函数
const vnode3 = h('ul', [
   h('li', {}, '苹果'),
   h('li', '西瓜'),
   h('li', [
     h('div', [
       h('p', '11111'),
       h('p', '22222'),
     ])
   ])
  h('li', h('p', '山楂'))
 ])

vue 中的模板引擎： Html 语法都会被翻译成虚拟DOM

标签：函数,li,算法,snabbdom,import,Diff,节点,undefined
来源： https://blog.csdn.net/weixin_45677987/article/details/117525239