（三）Vue-Snabbdom

虚拟 DOM 的作用

1. 维护视图和状态的关系
2. 复杂视图情况下提升渲染性能
3. 跨平台
   • 浏览器平台渲染DOM
   • 服务端渲染 SSR(Nuxt.js/Next.js)
   • 原生应用(Weex/React Native)
   • 小程序(mpvue/uni-app)等

Snabbdom

1. Vue.js 2.x 内部使用的虚拟 DOM 就是改造的 Snabbdom •
2. 大约 200 SLOC (single line of code) 3
3. 通过模块可扩展
4. 源码使用 TypeScript 开发 •
5. 最快的 Virtual DOM 之一

导入 Snabbdom

1. 安装 Snabbdom
   • npm intall [email protected]
2. 导入 Snabbdom
   Snabbdom 的两个核心函数 init 和 h()
   • init() 是一个高阶函数，返回 patch()
   • h() 返回虚拟节点 VNode，这个函数我们在使用 Vue.js 的时候见过

3. 文档中导入的方式

   
   

4. 实际导入的方式
   parcel/webpack 4 不支持 package.json 中的 exports 字段

   
   

模块

模块的作用

1. Snabbdom 的核心库并不能处理 DOM 元素的属性/样式/事件等， 可以通过注册 Snabbdom 默认提供的模块来实现
2. Snabbdom 中的模块可以用来扩展 Snabbdom的功能
3. Snabbdom 中的模块的实现是通过注册全局的钩子函数来实现的

官方提供的模块

•attributes
• props
• dataset
• class
• style
• eventlisteners

1. 导入需要的模块
2. init() 中注册模块
3. h() 函数的第二个参数处使用模块

Snabbdom 的核心

1. init() 设置模块，创建 patch() 函数
2. 使用 h() 函数创建 JavaScript 对象(VNode)描述真实 DOM
3. patch() 比较新旧两个 Vnode
4. 把变化的内容更新到真实 DOM 树

patch 整体过程分析

• patch(oldVnode, newVnode)
• 把新节点中变化的内容渲染到真实 DOM，最后返回新节点作为下一次 处理的旧节点
• 对比新旧 VNode 是否相同节点(节点的 key 和 sel 相同)
• 如果不是相同节点，删除之前的内容，重新渲染
• 如果是相同节点，再判断新的 VNode 是否有 text，如果有并且和 oldVnode 的 text 不同，直接更新文本内容
• 如果新的 VNode 有 children，判断子节点是否有变化

Diff 算法

Snbbdom 根据 DOM 的特点对传统的diff算法做了优化
• DOM 操作时候很少会跨级别操作节点
• 只比较同级别的节点

执行过程

在对开始和结束节点比较的时候，总共有四种情况
• oldStartVnode / newStartVnode (旧开始节点 / 新开始节点)
• oldEndVnode / newEndVnode (旧结束节点 / 新结束节点)
• oldStartVnode / newEndVnode (旧开始节点 / 新结束节点)
• oldEndVnode / newStartVnode (旧结束节点 / 新开始节点)

开始和结束节点

如果新旧开始节点是 sameVnode (key 和 sel 相同)
• 调用 patchVnode() 对比和更新节点
• 把旧开始和新开始索引往后移动 oldStartIdx++ / newStartIdx++

旧开始节点 / 新结束节点

• 调用 patchVnode() 对比和更新节点
• 把 oldStartVnode 对应的 DOM 元素，移动到右边，更新索引
为什么要移动到右边？

旧结束节点 / 新开始节点

• 调用 patchVnode() 对比和更新节点
• 把 oldEndVnode 对应的 DOM 元素，移动到左边，更新索引
为什么要移动到左边？

非上述四种情况

1. 遍历新节点，使用 newStartNode 的 key 在老节点数组中找相同节点
2. 如果没有找到，说明 newStartNode 是新节点
   • 创建新节点对应的 DOM 元素，插入到 DOM 树中

3. 如果找到了
   • 判断新节点和找到的老节点的 sel 选择器是否相同
   • 如果不相同，说明节点被修改了
   重新创建对应的 DOM 元素，插入到 DOM 树中
   • 如果相同，把 elmToMove 对应的 DOM 元素，移动到左边

   
   

循环结束

• 当老节点的所有子节点先遍历完 (oldStartIdx > oldEndIdx)，循环结束
• 新节点的所有子节点先遍历完 (newStartIdx > newEndIdx)，循环结束

1. oldStartIdx > oldEndIdx
   如果老节点的数组先遍历完(oldStartIdx > oldEndIdx)
   • 说明新节点有剩余，把剩余节点批量插入到右边

   
   

2. newStartIdx > newEndIdx
   如果新节点的数组先遍历完(newStartIdx > newEndIdx)
   • 说明老节点有剩余，把剩余节点批量删除