共计 15560 个字符，预计需要花费 39 分钟才能阅读完成。
前言
Vue 源码中虚构 DOM 与 Diff 算法的实现借鉴了 snabbdom 这个库，snabbdom 是一个虚构 DOM 库，它专一于简略，模块化，弱小的性能和性能。要彻底明确虚构 DOM 与 Diff 算法就得剖析 snabbdom 这个库到底做了什么？
获取源代码
能够通过npm i snabbdom -D 来下载 snabbdom 库，这样咱们既能看到 src 下用 Typescript 编写的源码，也能看到编译好的 JavaScript 代码。上面贴的源码是 2.1.0 版本，当初曾经更新到 3.0.3 版本了。倡议将下方呈现的源码复制到下载的 snabbdom 库中相应地位，这样看源码比拟清晰。那咱们就开始剖析源码吧。
源码剖析
JavaScript 对象模仿实在 DOM 树
通过调用 snabbdom 库中的 h函数就能够对实在 DOM 节点进行形象。咱们先来看看一个残缺的虚构 DOM 节点（vnode）是什么样的：
| { | |
| sel: "div", // 以后 vnode 的选择器 | |
| elm: undefined, // 以后 vnode 对应实在的 DOM 节点 | |
| key: undefined, // 以后 vnode 的惟一标识 | |
| data: {}, // 以后 vnode 的属性，款式等 | |
| children: undefined, // 以后 vnode 的子元素 | |
| text: '文本内容' // 以后 vnode 的文本节点内容 | |
| } |
实际上，h函数的作用就是用 JavaScript 对象模仿实在的 DOM 树，对实在 DOM 树进行形象。调用 h函数就能失去由 vnode 组成的虚构 DOM 树。
调用 h函数有多种形式：
| ① h('div') | |
| ② h('div', 'text') | |
| ③ h('div', h('p')) | |
| ④ h('div', []) | |
| ⑤ h('div', {}) | |
| ⑥ h('div', {}, 'text') | |
| ⑦ h('div', {}, h('span')) | |
| ⑧ h('div', {}, []) |
使得 h函数的第二和第三个参数比拟灵便，要判断的状况也比拟多，上面把这部分的外围源码剖析贴一下：
| // h 函数：依据传入的参数揣测出 h 函数的调用模式以及每个 vnode 对应属性的属性值 | |
| export function h(sel: string): VNode | |
| export function h(sel: string, data: VNodeData | null): VNode | |
| export function h(sel: string, children: VNodeChildren): VNode | |
| export function h(sel: string, data: VNodeData | null, children: VNodeChildren): VNode | |
| export function h(sel: any, b?: any, c?: any): VNode {var data: VNodeData = {}; | |
| var children: any; | |
| var text: any; | |
| var i: number | |
| // c 有值，状况有：⑥ ⑦ ⑧ | |
| if (c !== undefined) { | |
| // c 有值的状况下 b 有值，状况有：⑥ ⑦ ⑧ | |
| if (b !== null) { | |
| // 将 b 赋值给 data | |
| data = b | |
| } | |
| // c 的数据类型是数组，状况有：⑧ | |
| if (is.array(c)) { | |
| children = c | |
| // 判断 c 是文本节点，状况有：⑥ | |
| } else if (is.primitive(c)) { | |
| text = c | |
| // 状况有：⑦，⑦这条语句会先执行 h('span')代码，间接调用 vnode 函数，调用后会返回{sel: 'span'}，// 这时 c 有值并且 c 并且含有 sel 属性 | |
| } else if (c && c.sel) {// 注：这里的 c 不是 h('span')，而是 h('span')的返回值，是个 {sel: 'span'} 这样的对象，// 最初组装成数组赋值给 children | |
| children = | |
| } | |
| // c 没有值，b 有值，状况有：② ③ ④ ⑤ | |
| } else if (b !== undefined && b !== null) { | |
| // b 的数据类型是数组，状况有：④ | |
| if (is.array(b)) { | |
| children = b | |
| // 判断 b 是文本节点，状况有：② | |
| } else if (is.primitive(b)) { | |
| text = b | |
| // 状况有：③，③这条语句会先执行 h('p')代码，间接调用 vnode 函数，调用后会返回{sel: 'p'}，// 这时 b 有值并且 b 并且含有 sel 属性 | |
| } else if (b && b.sel) {// 注：这里的 b 不是 h('p')，而是 h('p')的返回值，是个 {sel: 'p'} 这样的对象，// 最初组装成数组赋值给 children | |
| children = [b] | |
| // 状况有：⑤，将 b 赋值给 data | |
| } else {data = b} | |
| } | |
| // children 有值，遍历 children | |
| if (children !== undefined) {for (i = 0; i < children.length; ++i) { | |
| // 判断 children 中的每一项的数据类型是否是 string/number，调用 vnode 函数 | |
| if (is.primitive(children[i])) {children[i] = vnode(undefined, undefined, undefined, children[i], undefined) | |
| } | |
| } | |
| } | |
| /** | |
| * 调用 vnode 后返回形如 | |
| * { | |
| * sel: 'div', | |
| * data: {style: '#000'}, | |
| * children: undefined, | |
| * text: 'text', | |
| * elm: undefined, | |
| * key: undefined | |
| * } | |
| * 这样的 JavaScript 对象 | |
| */ | |
| return vnode(sel, data, children, text, undefined); | |
| } |
| // vnode 函数：依据传入的参数组装 vnode 构造 | |
| export function vnode(sel: string | undefined, | |
| data: any | undefined, | |
| children: Array<VNode | string> | undefined, | |
| text: string | undefined, | |
| elm: Element | Text | undefined): VNode { | |
| // 判断 data 是否有值，有值就将 data.key 赋值给 key，无值就将 undefined 赋值给 key | |
| const key = data === undefined ? undefined : data.key | |
| // 将传入 vnode 函数的参数组装成一个对象返回 | |
| return {sel, data, children, text, elm, key} | |
| } |
diff 算法 – 入口函数
通过 h函数失去新旧虚构节点 DOM 对象后就能够进行差别比拟了。在理论应用过程中，咱们是间接调用 snabbdom 的 patch 函数，而后传入两个参数，通过 patch 函数外部解决就能够失去新旧虚构节点 DOM 对象的差别，并将差别局部更新到真正的 DOM 树上。
首先，patch 函数会去判断 oldVnode 是否是实在 DOM 节点，如果是则须要先转换为虚构 DOM 节点 oldVnode = emptyNodeAt(oldVnode)；而后去比拟新旧 vnode 是否是同一个节点 sameVnode(oldVnode, vnode)，如果是同一节点则准确比拟新旧 vnode patchVnode(oldVnode, vnode, insertedVnodeQueue)，如果不是则间接创立新 vnode 对应的实在 DOM 节点 createElm(vnode, insertedVnodeQueue)，在 createElm 函数中创立新 vnode 的实在 DOM 节点以及它对应的子节点，并把子节点插入到相应地位。如果 oldVnode.elm 有父节点则把新 vnode 对应的实在 DOM 节点作为子节点插入到相应地位，并且删除旧节点。上面贴一下 patch 函数的源码解析：
| function patch(oldVnode: VNode | Element, vnode: VNode): VNode { | |
| let i: number, elm: Node, parent: Node | |
| const insertedVnodeQueue: VNodeQueue = [] | |
| for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]() | |
| // isVnode(oldVnode)判断 oldVnode.sel 是否存在，不存在示意 oldVnode 是实在的 DOM 节点 | |
| if (!isVnode(oldVnode)) { | |
| // oldVnode 可能是实在的 DOM 节点，也可能是旧的虚构 DOM 节点，// 如果是实在的 DOM 节点要调用 vnode 函数组装成虚构 DOM 节点 | |
| oldVnode = emptyNodeAt(oldVnode) | |
| } | |
| // 判断出是同一个虚构 DOM 节点 | |
| if (sameVnode(oldVnode, vnode)) { | |
| // 准确比拟两个虚构 DOM 节点 | |
| patchVnode(oldVnode, vnode, insertedVnodeQueue) | |
| } else { | |
| // oldVnode.elm 是虚构 DOM 节点对应的实在 DOM 节点 | |
| elm = oldVnode.elm! | |
| // api.parentNode(elm)获取 elm 的父节点 elm.parentNode | |
| parent = api.parentNode(elm) as Node | |
| // 创立 vnode 下实在 DOM 节点并更新到相应地位 | |
| createElm(vnode, insertedVnodeQueue) | |
| // elm 的父节点存在 | |
| if (parent !== null) {// api.nextSibling(elm)-->elm.nextSibling 返回紧跟在 elm 之后的节点 | |
| // api.insertBefore(parent, B, C)-->-->parent.insertBefore(B, C)，将 B 节点插入到 C 节点之前 | |
| api.insertBefore(parent, vnode.elm!, api.nextSibling(elm)) | |
| removeVnodes(parent, [oldVnode], 0, 0) // 删除旧的 DOM 节点 | |
| } | |
| } | |
| for (i = 0; i < insertedVnodeQueue.length; ++i) {insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i]) | |
| } | |
| for (i = 0; i < cbs.post.length; ++i) cbs.post[i]() | |
| return vnode | |
| } |
patch 函数中用到了 emptyNodeAt 函数，这个函数次要是解决 patch 函数第一个参数为实在 DOM 节点的状况。上面贴一下这个函数的源码解析：
| function emptyNodeAt(elm: Element) { | |
| // 判断传入的 DOM 节点 elm 有没有 id 属性，因为虚构 DOM 节点的 sel 属性是选择器，例如：div#wrap | |
| const id = elm.id ? '#' + elm.id : '' | |
| // 判断传入的 ODM 节点 elm 有没有 class 属性，因为虚构 DOM 节点的 sel 属性是选择器，例如：div.wrap | |
| const c = elm.className ? '.' + elm.className.split('').join('.') :'' | |
| // 调用 vnode 函数将传入的 DOM 节点组装成虚构 DOM 节点 | |
| return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm) | |
| } |
patch 函数中用到了 sameVnode 函数，这个函数次要用来比拟两个虚构 DOM 节点是否是同一个虚构节点。上面贴一下这个函数的源码剖析：
| function sameVnode(vnode1: VNode, vnode2: VNode): boolean { | |
| // 判断 vnode1 和 vnode2 是否是同一个虚构 DOM 节点 | |
| return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel | |
| } |
diff 算法 – 新旧 vnode 不是同一个节点的状况
依据 sameVnode 函数返回的后果，新旧 vnode 不是同一个虚构节点。首先获取到 oldVnode 对应实在 DOM 节点的父节点 parent，而后调用 createElm 函数去创立 vnode 对应的实在 DOM 节点以及它的子节点和标签属性等等。判断是否有 parent，如果有则将 vnode.elm 对应的 DOM 节点作为子节点插入到 parent 节点下的相应地位。局部源码剖析在 patch 函数中，上面贴一下 createElm 函数的源码剖析：
| function createElm(vnode: VNode, insertedVnodeQueue: VNodeQueue): Node { | |
| let i: any | |
| let data = vnode.data | |
| if (data !== undefined) { | |
| const init = data.hook?.init | |
| if (isDef(init)) {init(vnode) | |
| data = vnode.data | |
| } | |
| } | |
| const children = vnode.children | |
| const sel = vnode.sel | |
| // 判断 sel 值中是否蕴含! | |
| if (sel === '!') {if (isUndef(vnode.text)) {vnode.text = ''} | |
| // --> document.createComment(vnode.text!)创立正文节点 | |
| vnode.elm = api.createComment(vnode.text!) | |
| } else if (sel !== undefined) { | |
| // 解析 sel 选择器 | |
| // 查找 sel 属性值中 #的索引，没找到返回 -1 | |
| const hashIdx = sel.indexOf('#') | |
| // hashIdx 作为起始地位查找 sel 属性值中. 的索引，如果 hashIdx < 0 那么从地位 0 开始查找 | |
| const dotIdx = sel.indexOf('.', hashIdx) | |
| const hash = hashIdx > 0 ? hashIdx : sel.length | |
| const dot = dotIdx > 0 ? dotIdx : sel.length | |
| // 若 id 选择器或 class 选择器存在，则从 0 位开始截取到最小索引值的地位完结，截取出的就是标签名称 | |
| // 都不存在间接取 sel 值 | |
| const tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel | |
| // 依据 tag 名创立 DOM 元素 | |
| const elm = vnode.elm = isDef(data) && isDef(i = data.ns) | |
| ? api.createElementNS(i, tag) | |
| : api.createElement(tag) | |
| // 设置 id 属性 | |
| if (hash < dot) elm.setAttribute('id', sel.slice(hash + 1, dot)) | |
| // 设置 calss 属性 | |
| if (dotIdx > 0) elm.setAttribute('class', sel.slice(dot + 1).replace(/\./g, ' ')) | |
| for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode) | |
| // 判断 children 是否是数组，是数组则遍历 children | |
| if (is.array(children)) {for (i = 0; i < children.length; ++i) {const ch = children[i] | |
| if (ch != null) {// createElm(ch as VNode, insertedVnodeQueue)递归创立子节点 | |
| // api.appendChild(A, B)-->A.appendChild(B)将 B 节点插入到指定父节点 A 的子节点列表的开端 | |
| api.appendChild(elm, createElm(ch as VNode, insertedVnodeQueue)) | |
| } | |
| } | |
| // 判断 vnode.text 有没有值 | |
| } else if (is.primitive(vnode.text)) {// api.createTextNode(vnode.text)依据 vnode.text 创立文本节点 | |
| // api.appendChild(elm, B)-->A.appendChild(B)将文本节点 B 增加到父节点 elm 子节点列表的开端处 | |
| api.appendChild(elm, api.createTextNode(vnode.text)) | |
| } | |
| const hook = vnode.data!.hook | |
| if (isDef(hook)) {hook.create?.(emptyNode, vnode) | |
| if (hook.insert) {insertedVnodeQueue.push(vnode) | |
| } | |
| } | |
| } else { | |
| // sel 不存在间接创立文本节点 | |
| vnode.elm = api.createTextNode(vnode.text!) | |
| } | |
| return vnode.elm | |
| } |
diff 算法 – 新旧 vnode 是同一个节点的状况
下面剖析了新旧 vnode 不是同一个虚构节点，那么是同一个虚构节点又该怎么去解决？首先，调用 patchVnode 函数 patchVnode(oldVnode, vnode, insertedVnodeQueue)，这个函数会对新旧 vnode 进行准确比拟：
① 如果新旧虚构 DOM 对象全等 oldVnode === vnode，那么不做任何操作，间接返回；
② 而后判断 vnode 是否有文本节点 isUndef(vnode.text)，如果没有文本节点则判断 oldVnode 与 vnode 有没有子节点 isDef(oldCh) && isDef(ch)，如果都有子节点且不相等则调用 updateChildren 函数去更新子节点；
③ 如果只有 vnode 有子节点而 oldVnode 有文本节点或没有内容，将 oldVnode 的文本节点置空或不做解决，调用 addVnodes 函数将 vnode 的子节点创立出对应的实在 DOM 并循环插入到父节点下；
④ 如果只有 oldVnode 有子节点而 vnode 没有内容，则间接删除 oldVnode 下的子节点；
⑤ 如果只有 oldVnode 有文本节点而 vnode 没有内容，则将 oldVnode 对应的实在 DOM 节点的文本置空;
⑥ 如果 vnode 有文本节点，oldVnode 有子节点就将对应实在 DOM 节点的子节点删除，没有就不解决，而后将 vnode 的文本节点作为子节点插入到对应实在 DOM 节点下。
局部源码剖析在 patch 函数中，上面贴一下 patchVnode 函数的源码剖析：
| function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) { | |
| const hook = vnode.data?.hook | |
| hook?.prepatch?.(oldVnode, vnode) | |
| const elm = vnode.elm = oldVnode.elm! | |
| const oldCh = oldVnode.children as VNode[] | |
| const ch = vnode.children as VNode[] | |
| // oldVnode 与 vnode 齐全相等并没有须要更新的内容则间接返回，不做解决 | |
| if (oldVnode === vnode) return | |
| if (vnode.data !== undefined) {for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) | |
| vnode.data.hook?.update?.(oldVnode, vnode) | |
| } | |
| // vnode.text 为 undefined 示意 vnode 虚构节点没有文本内容 | |
| if (isUndef(vnode.text)) { | |
| // oldCh 与 ch 都不为 undefined 示意 oldVnode 与 vnode 都有虚构子节点 children | |
| if (isDef(oldCh) && isDef(ch)) { | |
| // oldCh !== ch 利用算法去更新子节点 | |
| if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) | |
| } else if (isDef(ch)) {// 将 oldVnode 的文本节点设置为 ''if (isDef(oldVnode.text)) api.setTextContent(elm,'') | |
| // 调用 addVnodes 办法将 vnode 的虚构子节点循环插入到 elm 节点的子列表下 | |
| addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) | |
| // oldCh 不为 undefined 示意 oldVnode 有虚构子节点 children | |
| } else if (isDef(oldCh)) { | |
| // vnode 没有 children 则间接删除 oldVnode 的 children | |
| removeVnodes(elm, oldCh, 0, oldCh.length - 1) | |
| // oldVnode.text 有值而 vnode.text 没有值 | |
| } else if (isDef(oldVnode.text)) {// 将 oldVnode 的文本节点设置为 ''api.setTextContent(elm,'') | |
| } | |
| // oldVnode 与 vnode 文本节点内容不同 | |
| } else if (oldVnode.text !== vnode.text) {// isDef(oldCh)-->oldCh !== undefined 表明 oldVnode 虚构节点下有虚构子节点 | |
| if (isDef(oldCh)) {removeVnodes(elm, oldCh, 0, oldCh.length - 1) | |
| } | |
| // oldCh 虚构节点下没有虚构子节点则间接更新文本内容 | |
| api.setTextContent(elm, vnode.text!) | |
| } | |
| hook?.postpatch?.(oldVnode, vnode) | |
| } |
diff 算法 – 新旧 vnode 子节点的更新策略
当新旧 vnode 都有子节点时，diff 算法定义了四个指针来解决子节点，四个指针别离是：oldStartVnode(旧前 vnode)/newStartVnode(新前 vnode)/oldEndVnode(旧后 vnode)/newEndVnode(新后 vnode)。进入循环体内后，新旧 vnode 的子节点两两比拟，这里提供了一套比拟规定，如下图：
如果下面四个规定都不满足，将 oldVnode 的子节点从旧的前索引 oldStartIdx 到旧的后索引 oldEndIdx 做一个 key 与对应地位序号的映射 oldKeyToIdx，通过新 vnode 的 key 去找 oldKeyToIdx 中是否有对应的索引值，若没有，表明 oldVnode 没有对应的旧节点，是一个新增的节点，进行插入操作；若有，表明 oldVnode 有对应的旧节点，不是一个新增节点，进行挪动操作。上面贴一下源码解析：
| // 旧 vnode 的子节点的前索引 oldStartIdx 到后索引 oldEndIdx 的 key 与对应地位序号的映射关系 | |
| function createKeyToOldIdx(children: VNode[], beginIdx: number, endIdx: number): KeyToIndexMap {const map: KeyToIndexMap = {} | |
| for (let i = beginIdx; i <= endIdx; ++i) {const key = children[i]?.key | |
| if (key !== undefined) {map[key] = i | |
| } | |
| } | |
| /** | |
| * 例如：map = {A: 1, B: 2} | |
| */ | |
| return map | |
| } |
| function updateChildren(parentElm: Node, | |
| oldCh: VNode[], | |
| newCh: VNode[], | |
| insertedVnodeQueue: VNodeQueue) { | |
| let oldStartIdx = 0 // 旧的前索引 | |
| let newStartIdx = 0 // 新的前索引 | |
| let oldEndIdx = oldCh.length - 1 // 旧的后索引 | |
| let newEndIdx = newCh.length - 1 // 新的后索引 | |
| let oldStartVnode = oldCh[0] // 旧的前 vnode | |
| let newStartVnode = newCh[0] // 新的前 vnode | |
| let oldEndVnode = oldCh[oldEndIdx] // 旧的后 vnode | |
| let newEndVnode = newCh[newEndIdx] // 新的后 vnode | |
| let oldKeyToIdx: KeyToIndexMap | undefined | |
| let idxInOld: number | |
| let elmToMove: VNode | |
| let before: any | |
| // 当旧的前索引 <= 旧的后索引 && 新的前索引 <= 新的后索引时执行循环语句 | |
| while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { | |
| // 为什么 oldStartVnode == null? | |
| // 因为虚构节点进行挪动操作后要将原来的虚构节点置为 undefined 了 | |
| // oldCh[idxInOld] = undefined as any | |
| if (oldStartVnode == null) {// oldStartVnode 为 null 就过滤掉以后节点，取 oldCh[++oldStartIdx]节点(旧的前索引的下一个索引的节点) | |
| oldStartVnode = oldCh[++oldStartIdx] | |
| } else if (oldEndVnode == null) {// oldEndVnode 为 null 就过滤掉以后节点，取 oldCh[--oldEndIdx]节点(旧的后索引的上一个索引的节点) | |
| oldEndVnode = oldCh[--oldEndIdx] | |
| } else if (newStartVnode == null) {// newStartVnode 为 null 就过滤掉以后节点，取 newCh[++newStartIdx]节点(新的前索引的下一个索引的节点) | |
| newStartVnode = newCh[++newStartIdx] | |
| } else if (newEndVnode == null) {// newEndVnode 为 null 就过滤掉以后节点，取 newCh[--newEndIdx]节点(新的后索引的上一个索引的节点) | |
| newEndVnode = newCh[--newEndIdx] | |
| } else if (sameVnode(oldStartVnode, newStartVnode)) { | |
| /** | |
| * ① 旧的前 vnode（oldStartVnode）与 新的前 vnode（newStartVnode）比拟是否是同一个虚构节点 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * h('li', { key: 'A'}, 'A') h('li', { key: 'A'}, 'A') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'B'}, 'B') | |
| */ | |
| // 如果判断是同一个虚构节点则调用 patchVnode 函数 | |
| patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue) | |
| // oldCh[++oldStartIdx]取旧的前索引节点的下一个虚构节点（例子中 key 为 B 的节点），赋值给 oldStartVnode | |
| oldStartVnode = oldCh[++oldStartIdx] | |
| // oldCh[++oldStartIdx]取新的前索引节点的下一个虚构节点（例子中 key 为 B 的节点），赋值给 newStartVnode | |
| newStartVnode = newCh[++newStartIdx] | |
| } else if (sameVnode(oldEndVnode, newEndVnode)) { | |
| /** | |
| * 如果旧的前 vnode（例子中 key 为 B 的虚构节点）与 新的前 vnode（例子中 key 为 B 的虚构节点）* 不是同一个虚构节点则进行计划②比拟 | |
| * ② 旧的后 vnode（oldEndVnode）与 新的后 vnode（newEndVnode）比拟是否是同一个虚构节点 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * h('li', { key: 'C'}, 'C') h('li', { key: 'A'}, 'A') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'B'}, 'B') | |
| */ | |
| // 如果判断是同一个虚构节点则调用 patchVnode 函数 | |
| patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue) | |
| // oldCh[--oldEndIdx]取旧的后索引节点的上一个虚构节点（例子中 key 为 C 的虚构节点），赋值给 oldEndVnode | |
| oldEndVnode = oldCh[--oldEndIdx] | |
| // newCh[--newEndIdx]取新的后索引节点的上一个虚构节点（例子中 key 为 A 的虚构节点），赋值给 newEndVnode | |
| newEndVnode = newCh[--newEndIdx] | |
| } else if (sameVnode(oldStartVnode, newEndVnode)) { | |
| /** | |
| * 如果旧的后 vnode 与 新的后 vnode 不是同一个虚构节点则进行计划③比拟 | |
| * ③ 旧的前 vnode（oldStartVnode）与 新的后 vnode（newEndVnode）比拟是否是同一个虚构节点 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * h('li', { key: 'C'}, 'C') h('li', { key: 'A'}, 'A') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'B'}, 'B') | |
| * h('li', { key: 'C'}, 'C') | |
| */ | |
| // 如果判断是同一个虚构节点则调用 patchVnode 函数 | |
| patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue) | |
| // 将旧的前 vnode（相当于例子中 key 为 C 的虚构节点）插入到以后旧的后 vnode 的下一个兄弟节点的后面 | |
| // 如果 oldEndVnode 是最开端的虚构节点，则 node.nextSibling 会返回 null，// 则新的虚构节点直接插入到最开端，等同于 appenChild | |
| api.insertBefore(parentElm, oldStartVnode.elm!, api.nextSibling(oldEndVnode.elm!)) | |
| // oldCh[++oldStartIdx]取旧的前索引虚构节点的下一个虚构节点（例子中 key 为 B 的虚构节点），赋值给 oldStartVnode | |
| oldStartVnode = oldCh[++oldStartIdx] | |
| // newCh[--newEndIdx]取新的后索引虚构节点的上一个虚构节点（例子中 key 为 B 的虚构节点），赋值给 newEndVnode | |
| newEndVnode = newCh[--newEndIdx] | |
| } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left | |
| /** | |
| * 如果旧的前 vnode 与 新的后 vnode 不是同一个虚构节点则进行计划④比拟 | |
| * ④ 旧的后 vnode（oldEndVnode）与 新的前 vnode（newStartVnode）比拟是否是同一个虚构节点 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * h('li', { key: 'C'}, 'C') h('li', { key: 'B'}, 'B') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'A'}, 'A') | |
| * h('li', { key: 'C'}, 'C') | |
| */ | |
| // 如果判断是同一个虚构节点则调用 patchVnode 函数 | |
| patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue) | |
| // 将旧的后 vnode（例子中 key 为 B）插入到以后旧的前 vnode（例子中 key 为 C）的后面 | |
| api.insertBefore(parentElm, oldEndVnode.elm!, oldStartVnode.elm!) | |
| // oldCh[--oldEndIdx]取旧的后索引节点的上一个虚构节点（例子中 key 为 C 的虚构节点），赋值给 oldEndVnode | |
| oldEndVnode = oldCh[--oldEndIdx] | |
| // newCh[++newStartIdx]取新的前索引节点的下一个虚构节点（例子中 key 为 A 的虚构节点），赋值给 newStartVnode | |
| newStartVnode = newCh[++newStartIdx] | |
| } else { | |
| // 不满足以上四种状况 | |
| if (oldKeyToIdx === undefined) { | |
| // oldKeyToIdx 保留旧的 children 中各个节点的 key 与对应地位序号的映射关系 | |
| oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) | |
| } | |
| // 从 oldKeyToIdx 中获取以后 newStartVnode 节点 key 对应的序号 | |
| idxInOld = oldKeyToIdx[newStartVnode.key as string] | |
| if (isUndef(idxInOld)) {// isUndef(idxInOld) --> idxInOld === undefined | |
| /** | |
| * idxInOld = undefined 要插入节点 | |
| * 旧的虚构子节点中没有 idxInOld 对应的节点，而新的虚构子节点中有，* 所以 newStartVnode 是须要插入的虚构节点 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * h('li', { key: 'A'}, 'A') h('li', { key: 'C'}, 'C') | |
| * h('li', { key: 'B'}, 'B') | |
| */ | |
| // 依据 newStartVnode（例子中 key 为 C 的虚构节点）创立实在 DOM 节点 createElm()，// 将创立的 DOM 节点插入到 oldStartVnode.elm（例子中 key 为 A 的节点）的后面 | |
| api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm!) | |
| } else { | |
| /** | |
| * idxInOld != undefined 要挪动节点 | |
| * 旧的虚构子节点中有 idxInOld 对应的节点，所以 oldCh[idxInOld]是须要挪动的虚构节点 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * h('li', { key: 'A'}, 'A') h('div', { key: 'B'}, 'B') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'D'}, 'D') | |
| */ | |
| elmToMove = oldCh[idxInOld] // elmToMove 保留要挪动的虚构节点 | |
| // 判断 elmToMove 与 newStartVnode 在 key 雷同的状况下 sel 属性是否雷同 | |
| if (elmToMove.sel !== newStartVnode.sel) { | |
| // sel 属性不雷同表明不是同一个虚构节点，// 依据 newStartVnode 虚构节点创立实在 DOM 节点并插入到 oldStartVnode.elm（旧的 key 为 A 的节点）之前 | |
| api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm!) | |
| } else { | |
| // key 与 sel 雷同示意是同一个虚构节点，调用 patchVnode 函数 | |
| patchVnode(elmToMove, newStartVnode, insertedVnodeQueue) | |
| // 解决完被挪动的虚构节点 oldCh[idxInOld]要设置为 undefined，不便下次循环解决时过滤掉曾经解决的节点 | |
| oldCh[idxInOld] = undefined as any | |
| // 将 elmToMove.elm（例子中旧的 key 为 B 的节点）插入到 oldStartVnode.elm（例子中 key 为 A 的节点）的后面 | |
| api.insertBefore(parentElm, elmToMove.elm!, oldStartVnode.elm!) | |
| } | |
| } | |
| // 取 newCh[++newStartIdx]虚构节点（例子中 key 为 D 的虚构节点）赋值给 newStartVnode | |
| newStartVnode = newCh[++newStartIdx] | |
| } | |
| } | |
| /** | |
| * 循环完结后旧的前索引 <= 旧的后索引 || 新的前索引 <= 新的后索引，* 示意还有局部虚构节点（例子中 key 为 C 的虚构节点）没解决 | |
| * 旧的虚构子节点 新的虚构子节点 | |
| * 状况一：* h('li', { key: 'A'}, 'A') h('li', { key: 'A'}, 'A') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'B'}, 'B') | |
| * h('li', { key: 'D'}, 'D') h('li', { key: 'C'}, 'C') | |
| * h('li', { key: 'D'}, 'D') | |
| * 状况二：* h('li', { key: 'A'}, 'A') h('li', { key: 'A'}, 'A') | |
| * h('li', { key: 'B'}, 'B') h('li', { key: 'B'}, 'B') | |
| * h('li', { key: 'C'}, 'C') | |
| */ | |
| if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) { | |
| // 解决例子中状况一 | |
| if (oldStartIdx > oldEndIdx) {// 待插入的节点以 before 节点为参照，newCh[newEndIdx]是例子中新的子节点中 key 为 C 的虚构节点，// 所以 before = newCh[newEndIdx + 1]是 key 为 D 的虚构节点 | |
| before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm | |
| // 例子中当初 newStartIdx，newEndIdx 都为 2 | |
| addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue) | |
| } else { | |
| // 解决例子中状况二，删除旧的前索引到旧的后索引两头的节点（例子中删除旧的 key 为 C 的虚构节点）removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) | |
| } | |
| } | |
| } |
正文完
