snabbdom学习

Posted 2020-12-16 usebylgb

核心内容： 以虚拟dom（vnode）描述真实dom

• h()创建节点
• init设置模块，生成patch函数
• patch对比dom差异，将差异更新的到dom中

官方文档https://github.com/snabbdom/snabbdom

中文文档https://github.com/coconilu/Blog/issues/152 

 

patch函数

是snabbdom的核心函数，可以理解为对新旧dom进行差异化的函数，会返回一个新的虚拟节点

大致流程如下

1. 对比新旧节点是否相同节点，（判断key和sel）
2. 如果不是相同节点，则删除旧的节点，重新渲染
3. 如果是，则判断新的节点是否有text，且与旧节点的text不相同，则更新文本
4. 如果新节点有children，则判断子节点是否有变化，判断子节点时使用diff算法
5. diff工程只会进行同层级的比较