浅谈Vue DIFF

const patch = (n1, n2) => {
    if(n1.tag !== n2.tag) {
      const n1ElParent = n1.el.parentElement;
      n1ElParent.removeChild(n1.el);
      mount(n2, n1ElParent)
    } else {
      // 取出 element 对象，并且在 n2 中进行保存
      const el = n1.el = n2.el
      // 为了获取 value
      const oldProps = n1.props || []
      const newProps = n2.props || []
      // 遍历新对象
      for(const key in newProps) {
        const oldValue = oldProps[key]
        const newValue = newProps[key]
        if(oldValue != newValue) {
          if(key.startsWith("on")) {
            el.addEventListener(key.slice(2).toLowerCase(), newValue);
          } else {
            el.setAttribute(key, newValue);
          }
        }
      }
      // 删除旧的 props
      for(const key in oldProps) {
        if(key.startsWith("on")) {
          const value = oldProps[key];
          // removeEventListener(type, listener)
          // type ==> 一个字符串，表示需要移除的事件类型 ｜ listener ==> 需要从目标事件中移除的事件处理函数。
          el.removeEventListener(key.slice(2).toLowerCase(), value)
        } 
        if(!(key in newProps)) {
          el.removeAttribute(key)
        }
      }
      // 3. 处理children
      const oldChildren = n1.children || []
      const newChildren = n2.children || []
      // 如果新的 node 的 children 只是一个字符串，那直接覆盖就可以了
      if (typeof newChildren === 'string') {
        // 如果旧的也是字符串，那就判断一下是不是一样的，然后覆盖一下
        if (typeof oldChildren === 'string') {
          if (newChildren != oldChildren) {
            el.textContent = newChildren
          }
        } else {
          // 如果新的是很多很多东西，我直接覆盖就可以了
          el.innerhtml = newChildren
        }
      } else {
        // 这种情况新的 node 并不是字符串，是数组啥的
        // 然后判断一下旧的的情况
        // 如果是字符串
        if(typeof oldChildren === 'string') {
          el.innerHTML = ""
          newChildren.forEach((item) => {
            mount(item, el)
          })
        } else {
          // 如果都不是字符串的话
          // 拿到共同长度
          const commonLength = Math.min(oldChildren.length, newChildren.length)
          for(let i=0;i<commonLength;i++) {
            patch(oldChildren[i], newChildren[i])
          }
          // 如果新的节点的子节点多一些的话，那就全部挂载上去
          if(newChildren.length > oldChildren.length) {
            newChildren.slice(commonLength).forEach((item) => {
              mount(item, el)
            })
          }
          // 如果旧的节点的子节点多一些，那就一个个删除！
          if(newChildren.length > oldChildren.length) {
            oldChildren.slice(commonLength).forEach((item) => {
              el.removeChild(item)
            })
          }
        }
      }
    }
  }

if (j < lastIndex) {
  // 进行 patch 操作
} else {
  lastIndex = i
}

function patchKeyedChildren(n1, n2, container) { 
    const newChildren = n2.children
    const oldChildren = n1.children
    // 更新相同的前置节点
    // 省略部分代码
    // 更新相同的后置节点
    // 省略部分代码
    if (j > oldEnd && j <= newEnd) { 
        // 省略部分代码 
    } else if (j > newEnd && j <= oldEnd) { 
        // 省略部分代码 
    } else {
        // 增加 else 分支来处理非理想情况
    }
}