Snabbdom虚拟库安装和使用

Vue的diff算法一部分借鉴了snabbdom这个虚拟库

snabbdom库： 一个精简化、模块化、功能强大、性能卓越的虚拟 DOM 库

安装snabbdom依赖 npm i -S snabbdom

安装打包依赖 npm i parcel-bundler -D

main.js文件中

import './style.css'
import App from './App.vue'
import { init, h, styleModule, eventListenersModule } from "snabbdom"

// 初始化patch函数
const patch = init([
    styleModule,  // 支持内联样式和动画 
    eventListenersModule  // 添加事件监听
])

// 通过h函数来创建虚拟DOM
let vnode = h("div", [
    h("h1", { style: { color:"red" } }, "snabbdom"),
    h("p", { on: { click: myClick } }, "这是一个p标签")
])

// p标签点击事件
function myClick() {
    console.log("p标签点击事件");
}

let app = document.querySelector("#app")

/**
 * patch函数接收两个参数
 * 参数一： 一个DOM元素 或者 一个表示当前视图的vnode  （app,vnode)  (oldVnode,newVnode) 
 * 参数二： 一个新的（需要更新的）vnode   
 * 
 * 
 * 如果第一个参数是DOM元素，那么新的vnode会转换成一个DOM节点来替换
 * 如果第一个参数是vnode，则新的vnode进行对比修改
 */
patch(app, vnode)
createApp(App).mount('#app')

浏览器运行结果