处理Fragment

碎片类型的VNode。

  1. // 处理Fragment
  2. const processFragment = (
  3.   n1,
  4.   n2,
  5.   container,
  6.   anchor,
  7.   parentComponent,
  8.   parentSuspense,
  9.   isSVG,
  10.   optimized
  11. ) => {
  12.   const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))
  13.   const fragmentEndAnchor = (n2.anchor = n1
  14.                              ? n1.anchor
  15.                              : hostCreateText(''))
  16.   let { patchFlag, dynamicChildren } = n2
  17.   if (patchFlag > 0) {
  18.     optimized = true
  19.   }
  21.   if (n1 == null) {
  22.     // 初始化挂载
  23.     hostInsert(fragmentStartAnchor, container, anchor)
  25.     hostInsert(fragmentEndAnchor, container, anchor)
  26.     // a fragment can only have array children
  27.     // since they are either generated by the compiler, or implicitly created
  28.     // from arrays.
  30.     // 挂载子节点，这里只能是数组的子集
  31.     mountChildren(
  32.       n2.children,
  33.       container,
  34.       fragmentEndAnchor,
  35.       parentComponent,
  36.       parentSuspense,
  37.       isSVG,
  38.       optimized
  39.     )
  40.   } else {
  42.     // 更新Fragment
  43.     if (
  44.       patchFlag > 0 &&
  45.       patchFlag & 64 /* STABLE_FRAGMENT */ &&
  46.       dynamicChildren &&
  47.       // #2715 the previous fragment could've been a BAILed one as a result
  48.       // of renderSlot() with no valid children
  49.       n1.dynamicChildren
  50.     ) {
  51.       // a stable fragment (template root or <template v-for>) doesn't need to
  52.       // patch children order, but it may contain dynamicChildren.
  53.       // 稳定片段（template root或<template v-for>）不需要
  54.       // 更新整个block，内部会遍历patch
  55.       patchBlockChildren(
  56.         n1.dynamicChildren,
  57.         dynamicChildren,
  58.         container,
  59.         parentComponent,
  60.         parentSuspense,
  61.         isSVG
  62.       )
  64.       if (parentComponent && parentComponent.type.__hmrId) {
  65.         traverseStaticChildren(n1, n2)
  66.       } else if (
  67.         // #2080 if the stable fragment has a key, it's a <template v-for> that may
  68.         //  get moved around. Make sure all root level vnodes inherit el.
  69.         // #2134 or if it's a component root, it may also get moved around
  70.         // as the component is being moved.
  71.         n2.key != null ||
  72.         (parentComponent && n2 === parentComponent.subTree)
  73.       )
  74.     } else {
  75.       // keyed / unkeyed, or manual fragments.
  76.       // for keyed & unkeyed, since they are compiler generated from v-for,
  77.       // each child is guaranteed to be a block so the fragment will never
  78.       // have dynamicChildren.
  79.       // 更新子节点，遍历patch
  80.       patchChildren(
  81.         n1,
  82.         n2,
  83.         container,
  84.         fragmentEndAnchor,
  85.         parentComponent,
  86.         parentSuspense,
  87.         isSVG,
  88.         optimized
  89.       )
  90.     }
  91.   }
  92. }

总结：

  1. 新增：
    1. 创建 FragmentStart，创建 FragmentEnd
    2. 挂载所有子节点 mountChildren
  2. 更新：
    1. 有动态收集的子节点， patchBlockChildren
    2. 更新子节点，patchChildren