不太理解节点移动

老师，节点移动这里说的前一个节点，后一个节点完全不理解，也想象不到，能否出一个debugger视频看下，我自己debugger看到achor也一直是null，理解不了

这里是不是涉及到什么算法了啊

朝思7326784 2024-12-06

源自：Vue3源码解读 5-3 Diff算法：Array节点找差异、移动DOM、删除无用节点

收起

2回答

Brian 2024-12-25 14:30:03

解释一下，有几行代码比较关键：

j < lastIndex这里，说明 newVnode对应的DOM是需要移动的；
取前一个node，即prevVnode
接下来有两种情况：
如果不存在，说明当前newVnode是第1个节点，就不需要移动；
如果存在，则需要将newVnode的真实DOM移动到prevVNode对应的DOM的后面，这里就是关键。
取prevVNode对应的真实DOM的下一个兄弟节点，并将其作为锚点，即prevVNode.el.nextSibling
然后再用Insert方法进行插入

收起回答

慕粉3946981 #1

其实课程视频中讲解的diff是个简版。vue3虚拟DOM的最后一个版本中关于新旧虚拟DOM是数组的情况，采取的快速比对 + 最长递增序列来实现的。

这个最长递增序列的本质是确定哪些老节点不需要移动，而官方实现的这个函数内部还采取了贪心+二分查找+前驱节点追溯让序列正确，

function getSequence(arr: number[]): number[] {
  const p = arr.slice()
  const result = [0]
  let i, j, u, v, c
  const len = arr.length
  for (i = 0; i < len; i++) {
    const arrI = arr[i]
    if (arrI !== 0) {
      j = result[result.length - 1]
      if (arr[j] < arrI) {
        p[i] = j
        result.push(i)
        continue
      }
      u = 0
      v = result.length - 1
      while (u < v) {
        c = (u + v) >> 1
        if (arr[result[c]] < arrI) {
          u = c + 1
        } else {
          v = c
        }
      }
      if (arrI < arr[result[u]]) {
        if (u > 0) {
          p[i] = result[u - 1]
        }
        result[u] = i
      }
    }
  }
  u = result.length
  v = result[u - 1]
  while (u-- > 0) {
    result[u] = v
    v = p[v]
  }
  return result
}

不知道老师是否理解上面的逻辑思想

2天前

Brian 2024-12-10 15:35:27

你把你的代码上传上来？是用的课程代码吗？

收起回答