挂载Element

  1. const mountElement = (
  2.   vnode,
  3.   container,
  4.   anchor,
  5.   parentComponent,
  6.   parentSuspense,
  7.   isSVG,
  8.   optimized
  9. ) => {
  10.   let el
  11.   let vnodeHook
  12.   const {
  13.     type,
  14.     props,
  15.     shapeFlag,
  16.     transition,
  17.     scopeId,
  18.     patchFlag,
  19.     dirs,
  20.   } = vnode
  21.   {
  22.     // 创建dom节点
  23.     el = vnode.el = hostCreateElement(vnode.type, isSVG, props && props.is)
  25.     if (shapeFlag & 8 /* TEXT_CHILDREN */) {
  26.       hostSetElementText(el, vnode.children)
  27.     } else if (shapeFlag & 16 /* ARRAY_CHILDREN */) {
  28.       // 处理数组子节点
  29.       mountChildren(
  30.         vnode.children,
  31.         el,
  32.         null,
  33.         parentComponent,
  34.         parentSuspense,
  35.         isSVG && type !== 'foreignObject',
  36.         optimized || !!vnode.dynamicChildren
  37.       )
  38.     }
  40.     // vnode的props：例如 { id: 'search', type:'button' }
  41.     if (props) {
  42.       for (const key in props) {
  43.         if (!isReservedProp(key)) {
  44.           hostPatchProp(
  45.             el,
  46.             key,
  47.             null,
  48.             props[key],
  49.             isSVG,
  50.             vnode.children,
  51.             parentComponent,
  52.             parentSuspense,
  53.             unmountChildren
  54.           )
  55.         }
  56.       }
  58.     }
  59.     // 设置dom的一些attr属性
  60.     setScopeId(el, scopeId, vnode, parentComponent)
  61.   }
  63.   // 将虚拟节点缓存给dom，且不能被枚举出来。
  64.   {
  65.     Object.defineProperty(el, '__vnode', {
  66.       value: vnode,
  67.       enumerable: false,
  68.     })
  69.     Object.defineProperty(el, '__vueParentComponent', {
  70.       value: parentComponent,
  71.       enumerable: false,
  72.     })
  73.   }
  75.   // 把创建的 element，插入到节点中
  76.   hostInsert(el, container, anchor)
  77. }

总结

  1. 创建一个element，赋值给 vnode.el
  2. 判断子节点类型
    1. 子节点是文本：创建文本
    2. 子节点是数组：执行方法 mountChildren，批量挂载子节点
  3. 设置element的 props
  4. 设置element的 attr 属性
  5. 把创建的element插入到 container 中