GitHub 地址 https://github.com/snabbdom/snabbdom#readme

//我们在页面先生成2个列表
const container = document.getElementById('container')
// 生成vnode
const vnode = h('ul#list', {}, [
  h('li.item', {}, 'Item 1'),
  h('li.item', {}, 'Item 2')
])
patch(container, vnode)
// 然后点击按钮更换内容
document.getElementById('btn-change').addEventListener('click', () => {
  const newVnode = h('ul#list', {}, [
    h('li.item', {}, 'Item 1'),
    h('li.item', {}, 'Item B'),
    h('li.item', {}, 'Item 3')
  ])
  patch(vnode, newVnode)
})

然后在点击时，可以看到 只更新了需要更新的dom，在虚拟dom中计算出了差别，以最小化代价去修改页面。

vdom小结

• 用JS模拟DOM结构（vnode）
• 新旧vnode对比，得出最小的更新范围，最后更新DOM
• 数据驱动视图的模式下，有效控制DOM操作