Open shinena opened 5 years ago
看参数，其中 oldCh 和 newCh 即表示了新旧 vnode 数组，两组数组通过比对的方式来差异化更新 DOM。 定义了一些变量：开始索引值、结束索引值、开始vnode、结束vnode等等…… 进行循环遍历，遍历条件为 oldStartIdx <= oldEndIdx 和 newStartIdx <= newEndIdx，在遍历过程中，oldStartIdx 和 newStartIdx 递增，oldEndIdx 和 newEndIdx 递减。当条件不符合跳出遍历循环。 如果 oldStartVnode 和 newStartVnode 相似，执行 patch。 如果 oldEndVnode 和 newEndVnode 相似，执行 patch。 如果 oldStartVnode 和 newEndVnode 相似，执行 patch，并且将该节点移动到 vnode 数组末一位。 如果 oldEndVnode 和 newStartVnode 相似，执行 patch，并且将该节点移动到 vnode 数组第一位。 如果没有相同的 idx，执行 createElm 方法创建元素。 如果如有相同的 idx，如果两个 vnode 相似，执行 patch，并且将该节点移动到 vnode 数组第一位。如果两个 vnode 不相似，视为新元素，执行 createElm 创建。 如果老 vnode 数组的开始索引大于结束索引，说明新 node 数组长度大于老 vnode 数组，执行 addVnodes 方法添加这些新 vnode 到 DOM 中。 如果老 vnode 数组的开始索引小于结束索引，说明老 node 数组长度大于新 vnode 数组，执行 removeVnodes 方法从 DOM 中移除老 vnode 数组中多余的 vnode。 https://violetjack.gitbooks.io/vue-laboratory/content/vnode-xue-xi.html
看参数，其中 oldCh 和 newCh 即表示了新旧 vnode 数组，两组数组通过比对的方式来差异化更新 DOM。 定义了一些变量：开始索引值、结束索引值、开始vnode、结束vnode等等…… 进行循环遍历，遍历条件为 oldStartIdx <= oldEndIdx 和 newStartIdx <= newEndIdx，在遍历过程中，oldStartIdx 和 newStartIdx 递增，oldEndIdx 和 newEndIdx 递减。当条件不符合跳出遍历循环。 如果 oldStartVnode 和 newStartVnode 相似，执行 patch。 如果 oldEndVnode 和 newEndVnode 相似，执行 patch。 如果 oldStartVnode 和 newEndVnode 相似，执行 patch，并且将该节点移动到 vnode 数组末一位。 如果 oldEndVnode 和 newStartVnode 相似，执行 patch，并且将该节点移动到 vnode 数组第一位。 如果没有相同的 idx，执行 createElm 方法创建元素。 如果如有相同的 idx，如果两个 vnode 相似，执行 patch，并且将该节点移动到 vnode 数组第一位。如果两个 vnode 不相似，视为新元素，执行 createElm 创建。 如果老 vnode 数组的开始索引大于结束索引，说明新 node 数组长度大于老 vnode 数组，执行 addVnodes 方法添加这些新 vnode 到 DOM 中。 如果老 vnode 数组的开始索引小于结束索引，说明老 node 数组长度大于新 vnode 数组，执行 removeVnodes 方法从 DOM 中移除老 vnode 数组中多余的 vnode。 https://violetjack.gitbooks.io/vue-laboratory/content/vnode-xue-xi.html