Function patchKeyedChildren

code/src/runtime-core/renderer.ts:110–259

(
    c1,
    c2,
    container,
    parentComponent,
    parentAnchor
  )

  };

  const patchKeyedChildren = (
    c1,
    c2,
    container,
    parentComponent,
    parentAnchor
  ) => {
    let i = 0;
    const l2 = c2.length;
    let e1 = c1.length - 1;
    let e2 = l2 - 1;

    const isSomeVNdoeType = (n1, n2) => {
      // 根据type 和 key来判断两个节点是否一样
      return n1.type === n2.type && n1.key === n2.key;
    };

    // 从左往右找到不同节点的i的位置
    while (i <= e1 && i <= e2) {
      const n1 = c1[i];
      const n2 = c2[i];
      // 判断两个节点是否一样，一样的话再次调用patch去递归来处理
      if (isSomeVNdoeType(n1, n2)) {
        patch(n1, n2, container, parentComponent, parentAnchor);
      } else {
        break;
      }
      i++;
    }
    // 右边的处理
    while (i <= e1 && i <= e2) {
      const n1 = c1[e1];
      const n2 = c2[e2];

      if (isSomeVNdoeType(n1, n2)) {
        patch(n1, n2, container, parentComponent, parentAnchor);
      } else {
        break;
      }

      e1--;
      e2--;
    }

    // 3. 新的比老的多，创建
    if (i > e1) {
      if (i <= e2) {
        const nextPos = e2 + 1;
        const anchor = nextPos < l2 ? c2[nextPos].el : null;
        // 可能是多个节点
        while (i <= e2) {
          patch(null, c2[i], container, parentComponent, anchor);
          i++;
        }
      }
    } else if (i > e2) {
      // 4. 新的比老的少
      while (i <= e1) {