已经作为 monorepo 的子项目合并到 https://github.com/shalldie/mini-mvvm
A mini virtual dom lib. 一个轻量级的虚拟dom库。
npm install mini-vdom --save
- 超级轻量
6.7kb
- 作为一个 vdom lib,你只用更改数据,
mini-vdom
会帮你处理好dom 🤓🤓 - 丰富的代码提示,已经包含了
.d.ts
文件
这是在学习 snabbdom 源码之后,借鉴其思路写的一个 vdom 库。
适合用在一些快速开发的项目中,或者作为二次开发的依赖,只包含了最常用的vdom功能,体积 6.7kb
超轻量。 如果需要构造大型复杂项目,你可能需要一个成熟的mvvm框架。
使用 npm run dev
去查看 src/dev.ts
的例子.
或者查看 在线例子 - Todo List
import { h, patch } from 'mini-vdom'; // es module, typescript
// const { h, patch } = require('MiniVdom'); // commonjs
// const { h, patch } = window['MiniVdom']; // window
// 生成一个 vnode 节点
const node = h('span', 'hello world');
// 把vnode挂载在一个dom上
patch(
document.getElementById('app'),
vnode,
);
// 用一个新的vnode去更新旧的vnode
const newNode = h(
'div.new-div',
{
attrs: {
'data-name': 'tom'
},
on: {
click() {
alert('new div')
}
}
},
'click me to show alert! '
);
patch(
vnode,
newVnode
);
// h 是 VNode 的工厂方法,提供以下四种方式去创建一个 VNode
// 记不住?没关系,已经提供了 .d.ts 文件提示
function h(type: string, text?: string): VNode;
function h(type: string, children?: VNode[]): VNode;
function h(type: string, data?: IVNodeData, text?: string): VNode;
function h(type: string, data?: IVNodeData, children?: VNode[]): VNode;