目录

• 目录
• 介绍
• 示例
• 阅读方法

介绍

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

参考：Github: Snabbdom README (opens new window)

特性:

• Vue 2.x 内部使用的 Virtual DOM 就是改造的 Snabbdom
• 大约 200 行源码
• 通过模块可扩展
• 源码使用 TypeScript 开发
• 最快的 Virtual DOM 之一

示例

snabbdom 使用示例。

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

const patch = init([
  // 通过传入模块初始化 patch 函数
  classModule, // 开启 classes 功能
  propsModule, // 支持传入 props
  styleModule, // 支持内联样式同时支持动画
  eventListenersModule, // 添加事件监听
]);

const container = document.getElementById("container");

const vnode = h("div#container.two.classes", { on: { click: someFn } }, [
  h("span", { style: { fontWeight: "bold" } }, "This is bold"),
  " and this is just normal text",
  h("a", { props: { href: "/foo" } }, "I'll take you places!"),
]);
// 传入一个空的元素节点 - 将产生副作用（修改该节点）
patch(container, vnode);

const newVnode = h(
  "div#container.two.classes",
  { on: { click: anotherEventHandler } },
  [
    h(
      "span",
      { style: { fontWeight: "normal", fontStyle: "italic" } },
      "This is now italic type"
    ),
    " and this is still just normal text",
    h("a", { props: { href: "/bar" } }, "I'll take you places!"),
  ]
);
// 再次调用 `patch`
patch(vnode, newVnode); // 将旧节点更新为新节点

阅读方法

• 根据如上的示例从核心 API 开始阅读。
• module 和 helper。