9.5 添加新元素

// 遍历新的 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]
    if (newVNode.key === oldVNode.key) {
      find = true // 找到可复用节点
      patch(oldVNode, newVNode, container)
      // ... 移动 / 更新 lastIndex
      break
    }
  }
}

if (!find) {
  // 新增节点：先找到正确位置，再挂载
  const prevVNode = newChildren[i - 1] // 新序列中的前一个节点
  let anchor = null
  if (prevVNode) {
    // 有前一个节点 → 插到它后面
    anchor = prevVNode.el.nextSibling
  } else {
    // 新序列的第一个节点 → 插到最前面
    anchor = container.firstChild
  }
  // 挂载 newVNode
  patch(null, newVNode, container, anchor)
}

function patch(n1, n2, container, anchor) {
  // ...
  if (!n1) {
    // 挂载时把锚点带下去
    mountElement(n2, container, anchor)
  } else {
    patchElement(n1, n2)
  }
  // ...
}

function mountElement(vnode, container, anchor) {
  // ... 创建元素、设置 children / props
  insert(el, container, anchor)
}