虚拟DOM如何被渲染产生的?
答：h函数
h函数的使用：
1.产生虚拟节点(vnode)
2.h函数可以嵌套，从而得到虚拟DOM树
1.产生虚拟节点
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h
} from "snabbdom";
// 创建出patch函数(diff算法的核心函数)
const patch =init([classModule,propsModule,styleModule,eventListenersModule,])
//一.h函数创建虚拟节点
const myVnode1=h('a',{
props:
{
href:'https://github.com/snabbdom/snabbdom',
target:'_blank'//在新的标签页打开网页
}
},'h函数创建虚拟节点')
// 打印虚拟节点的属性
console.log(myVnode1);
// 二.让虚拟节点上树(显示在页面上)
const container =document.getElementById('container')
patch(container,myVnode1)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script src="/xuni/bundle.js"></script>
</body>
</html>// 打印虚拟节点的属性console.log(myVnode1);
2.h函数可以嵌套，从而得到虚拟DOM树
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h
} from "snabbdom";
// 创建出patch函数(diff算法的核心函数)
const patch =init([classModule,propsModule,styleModule,eventListenersModule,])
// h函数可以嵌套，从而得到虚拟DOM树
const myVnode2 =h('ul',[
h('li',{},'跳舞'),
h('li','唱歌'),
h('li',[
h('div',[
h('p','你好'),
h('p','哈哈')
])
]),
h('li','打篮球'),
])
// 让虚拟节点上树(显示在页面上)
const container =document.getElementById('container')
patch(container,myVnode2)
