snabbdom vdom 框架

1、snabbdom

github地址：https://github.com/snabbdom/snabbdom

2、核心方法

var 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 into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

var 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!')
]);
// Second `patch` invocation
patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state

即：h方法和patch方法。

3、h方法

h方法用来创建vonde

h('<标签名>',{属性}, [子元素])
h('<标签名>',{属性}, '文本标签')

4、pacth方法

pacth方法用来将vnode渲染为html。

首次渲染：

// Patch into empty DOM element – this modifies the DOM as a side effect
patch(container, vnode);

更新渲染：

patch(vnode, newVnode);