9.6 移除不存在的元素

// 上一步的更新操作完成后，遍历旧的一组子节点
for (let i = 0; i < oldChildren.length; i++) {
  const oldVNode = oldChildren[i]
  // 拿旧子节点去新的一组子节点中寻找具有相同 key 值的节点
  const has = newChildren.find(vnode => vnode.key === oldVNode.key)
  if (!has) {
    // 没有找到 → 该节点已经不存在，需要卸载
    unmount(oldVNode)
  }
}

function patchChildren(n1, n2, container) {
  if (typeof n2.children === 'string') {
    if (Array.isArray(n1.children)) {
      n1.children.forEach((c) => unmount(c))
    }
    setElementText(container, n2.children)
  } else if (Array.isArray(n2.children)) {
    if (Array.isArray(n1.children)) {
      const oldChildren = n1.children
      const newChildren = n2.children
      // 寻找过程中遇到的最大索引值
      let lastIndex = 0
      // 遍历新的 children
      for (let i = 0; i < newChildren.length; i++) {
        const newVNode = newChildren[i]
        let find = false // 是否找到可复用节点
        // 遍历旧的 children
        for (let j = 0; j < oldChildren.length; j++) {
          const oldVNode = oldChildren[j]
          // key 相同 → 可复用，先 patch 更新内容
          if (newVNode.key === oldVNode.key) {
            find = true
            patch(oldVNode, newVNode, container)
            if (j < lastIndex) {
              // 索引变小 → 真实 DOM 需要移动
              const prevVNode = newChildren[i - 1]
              if (prevVNode) {
                const anchor = prevVNode.el.nextSibling
                insert(newVNode.el, container, anchor)
              }
            } else {
              lastIndex = j
            }
            break
          }
        }
        // 旧 children 中没找到 → 新增节点，挂载到正确位置
        if (!find) {
          const prevVNode = newChildren[i - 1]
          let anchor = null
          if (prevVNode) {
            anchor = prevVNode.el.nextSibling
          } else {
            anchor = container.firstChild
          }
          patch(null, newVNode, container, anchor)
        }
      }
      // 更新结束，清理旧 children 中已不存在的节点
      for (let i = 0; i < oldChildren.length; i++) {
        const oldVNode = oldChildren[i]
        const has = newChildren.find(vnode => vnode.key === oldVNode.key)
        if (!has) {
          unmount(oldVNode)
        }
      }
    } else {
      setElementText(container, '')
      n2.children.forEach(c => patch(null, c, container))
    }
  } else {
    if (Array.isArray(n1.children)) {
      n1.children.forEach(c => unmount(c))
    } else if (typeof n1.children === 'string') {
      setElementText(container, '')
    }
  }
}