之前在说 虚拟DOM的时候提到过 Snabbdom 这个库。今天尝试详细说说。

话不多说,准备两个文件夹,一个文件夹放源码,一个文件夹放demo

先去这里克隆代码 https://gitee.com/mirrors/Snabbdom,我放的是国内的gitee下载更快。

官方demo没啥用 https://github.com/snabbdom/snabbdom/issues/723

自己写了一个demo https://ji3206.coding.net/p/learn/d/learn-snabbdom/git

Vue是拿 snabbdom 改的https://github.com/snabbdom/snabbdom
特点:

  • Vue2.x 使用并魔改
  • 一共大概200行
  • 模块可拓展
  • ts开发
  • 最快的 VDOM 之一

实战

https://github.com/coconilu/blog/issues/152

  • h() render渲染node节点,把js对象解析为node节点
  • patch(oldNode, newNode) 进行对比,找出差异

借助 snabbdom 我们可以自己实现一个 vdom,实现局部渲染的效果。

https://www.cnblogs.com/xuntu/p/6800547.html
https://juejin.cn/post/6844903541824307213

图多 https://zhuanlan.zhihu.com/p/69401061
https://zhuanlan.zhihu.com/p/35674318