更新Element

更新element节点，主要是更新props和子节点,内部还涉及到动态patch更新。

  1. const patchElement = (
  2.   n1,
  3.   n2,
  4.   parentComponent,
  5.   parentSuspense,
  6.   isSVG,
  7.   optimized
  8. ) => {
  9.   const el = (n2.el = n1.el)
  10.   let { patchFlag, dynamicChildren, dirs } = n2
  11.   patchFlag |= n1.patchFlag & 16 /* FULL_PROPS */
  12.   const oldProps = n1.props || EMPTY_OBJ
  13.   const newProps = n2.props || EMPTY_OBJ
  15.   if (patchFlag > 0) {
  16.     if (patchFlag & 16 /* FULL_PROPS */) {
  17.       // 更新props
  18.       patchProps(
  19.         el,
  20.         n2,
  21.         oldProps,
  22.         newProps,
  23.         parentComponent,
  24.         parentSuspense,
  25.         isSVG
  26.       )
  27.     } else {
  28.       // class
  29.       if (patchFlag & 2 /* CLASS */) {
  30.         if (oldProps.class !== newProps.class) {
  31.           // 更新class
  32.           hostPatchProp(el, 'class', null, newProps.class, isSVG)
  33.         }
  34.       }
  36.       // style
  37.       if (patchFlag & 4 /* STYLE */) {
  38.         hostPatchProp(el, 'style', oldProps.style, newProps.style, isSVG)
  39.       }
  41.       // props
  42.       if (patchFlag & 8 /* PROPS */) {
  43.         const propsToUpdate = n2.dynamicProps
  44.         /**
  45.          * propsToUpdate是 onClick | onUpdate:modelValue 这些。
  46.          * 示例：<polygon :points="points"></polygon>  propsToUpdate === ["points"]
  47.         */
  48.         for (let i = 0; i < propsToUpdate.length; i++) {
  49.           const key = propsToUpdate[i]
  50.           const prev = oldProps[key]
  51.           const next = newProps[key]
  52.           // 这里的next可能是 string number function object boolean
  53.           // 比较不同就更新
  54.           if (
  55.             next !== prev ||
  56.             (hostForcePatchProp && hostForcePatchProp(el, key))
  57.           ) {
  58.             hostPatchProp(
  59.               el,
  60.               key,
  61.               prev,
  62.               next,
  63.               isSVG,
  64.               n1.children,
  65.               parentComponent,
  66.               parentSuspense,
  67.               unmountChildren
  68.             )
  69.           }
  70.         }
  71.       }
  72.     }
  74.     // text
  75.     if (patchFlag & 1 /* TEXT */) {
  76.       if (n1.children !== n2.children) {
  77.         hostSetElementText(el, n2.children)
  78.       }
  79.     }
  80.   } 
  81.   else if (!optimized && dynamicChildren == null) {
  82.     // unoptimized, full diff
  83.     patchProps(
  84.       el,
  85.       n2,
  86.       oldProps,
  87.       newProps,
  88.       parentComponent,
  89.       parentSuspense,
  90.       isSVG
  91.     )
  92.   }
  94.   // full diff
  95.   patchChildren(
  96.     n1,
  97.     n2,
  98.     el,
  99.     null,
  100.     parentComponent,
  101.     parentSuspense,
  102.     areChildrenSVG
  103.   )
  104. }

总结

主要做了以下几件事情：

  1. 更新 props
  2. 更新 class
  3. 更新 style
  4. 更新 text
  5. 更新子节点 patchChildren