学习笔记

虚拟 DOM

• 含义：用 JS 对象描述 DOM 的层次结构。DOM 中的一切属性都在虚拟 DOM 中有对应的属性
• h 函数用来产生虚拟节点 VNode
• 虚拟节点包含的属性

{
    children: undefined // 包含的子节点
    data: {} // 属性
    elm: undefined // DOM树中的位置
    key: undefined // 节点key值
    sel: 'div' // 节点标签（select）
    text: '我是一个大人' // 文本
}
复制代码

snabbdom

简介：一个虚拟 DOM 工具库

patch 函数执行图

diff 算法

• key用于服务最小化更新
• 只有是同一个虚拟节点才会进行精确化比较，选择器相同而且key相同才是同一个虚拟节点
• 只会进行同层比较，不会进行跨层比较

经典 diff 算法优化策略

简称

• 新虚拟列表的前指针(下标) —- 新前指针
• 新虚拟列表的后指针(下标) —- 新后指针
• 旧虚拟列表的前指针(下标) —- 旧前指针
• 旧虚拟列表的后指针(下标) —- 旧后指针

四种命中规则

1. 新前指针 VS 旧前指针
2. 新后指针 VS 旧后指针
3. 新后指针 VS 旧前指针 （此种情况命中，涉及移动节点，那么新前指针指向的节点，移动到旧后节点之后）
4. 旧后指针 VS 新前指针 （此种情况命中，涉及移动节点，那么新前指针指向的节点，移动到旧前节点之前）

如果都没有命中，就需要用循环来寻找相同的虚拟节点进行比较

命中规则分解图

手写 diff 算法

源码链接：

github.com/AFine970/st…

参考资料

www.bilibili.com/video/BV1v5…

好好学习不会差，一起进步！