虚拟 DOM 的作用
- 维护视图和状态的关系
- 复杂视图情况下提升渲染性能
- 跨平台
• 浏览器平台渲染DOM
• 服务端渲染 SSR(Nuxt.js/Next.js)
• 原生应用(Weex/React Native)
• 小程序(mpvue/uni-app)等
Snabbdom
- Vue.js 2.x 内部使用的虚拟 DOM 就是改造的 Snabbdom •
- 大约 200 SLOC (single line of code) 3
- 通过模块可扩展
- 源码使用 TypeScript 开发 •
- 最快的 Virtual DOM 之一
导入 Snabbdom
- 安装 Snabbdom
• npm intall snabbdom@2.1.0 - 导入 Snabbdom
Snabbdom 的两个核心函数 init 和 h()
• init() 是一个高阶函数，返回 patch()
• h() 返回虚拟节点 VNode，这个函数我们在使用 Vue.js 的时候见过 -
文档中导入的方式
-
实际导入的方式
parcel/webpack 4 不支持 package.json 中的 exports 字段
模块
模块的作用
- Snabbdom 的核心库并不能处理 DOM 元素的属性/样式/事件等， 可以通过注册 Snabbdom 默认提供的模块来实现
- Snabbdom 中的模块可以用来扩展 Snabbdom的功能
- Snabbdom 中的模块的实现是通过注册全局的钩子函数来实现的
官方提供的模块
•attributes
• props
• dataset
• class
• style
• eventlisteners
- 导入需要的模块
- init() 中注册模块
- h() 函数的第二个参数处使用模块
Snabbdom 的核心
- init() 设置模块，创建 patch() 函数
- 使用 h() 函数创建 JavaScript 对象(VNode)描述真实 DOM
- patch() 比较新旧两个 Vnode
- 把变化的内容更新到真实 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 元素，移动到左边，更新索引
为什么要移动到左边？
非上述四种情况
- 遍历新节点，使用 newStartNode 的 key 在老节点数组中找相同节点
- 如果没有找到，说明 newStartNode 是新节点
• 创建新节点对应的 DOM 元素，插入到 DOM 树中 -
如果找到了
• 判断新节点和找到的老节点的 sel 选择器是否相同
• 如果不相同，说明节点被修改了
重新创建对应的 DOM 元素，插入到 DOM 树中
• 如果相同，把 elmToMove 对应的 DOM 元素，移动到左边
循环结束
• 当老节点的所有子节点先遍历完 (oldStartIdx > oldEndIdx)，循环结束
• 新节点的所有子节点先遍历完 (newStartIdx > newEndIdx)，循环结束
-
oldStartIdx > oldEndIdx
如果老节点的数组先遍历完(oldStartIdx > oldEndIdx)
• 说明新节点有剩余，把剩余节点批量插入到右边
-
newStartIdx > newEndIdx
如果新节点的数组先遍历完(newStartIdx > newEndIdx)
• 说明老节点有剩余，把剩余节点批量删除
