Vue3源码分析组件挂载创建虚拟节点

mount(rootContainer) {
 //判断当前返回的app是否已经调用过mount方法
 if (!isMounted) {
 //如果当前组件已经有了app
 //实例则已经挂载了警告用户
 if (rootContainer.__vue_app__) {
  console.warn(
   `There is already an app instance mounted on the host container.\n` +
   ` If you want to mount another app on the same host container,` +
   ` you need to unmount the previous app by calling \`app.unmount()\` first.`
  );
 }
 //创建组件的VNode
 const vNode = createVNode(rootComponent);
 //刚才调用createApp创建的上下文
 vNode.appContext = context;
 render(vNode, rootContainer); //渲染虚拟DOM
 //标记已经挂载了
 isMounted = true;
 //建立app与DOM的关联
 app._container = rootContainer;
 rootContainer.__vue_app__ = app;
 //建立app与组件的关联
 app._instance = vNode.component;
 }
 //已经调用过mount方法 警告用户
 else {
  console.warn(
   `App has already been mounted.\n` +
   `If you want to remount the same app, move your app creation logic ` +
   `into a factory function and create fresh app instances for each ` +
   `mount - e.g. \`const createMyApp = () => createApp(App)\``
  );
 }
}

export const ShapeFlags = {
  ELEMENT: 1, //HTML SVG 或普通DOM元素
  FUNCTIONAL_COMPONENT: 2, //函数式组件
  STATEFUL_COMPONENT: 4, //有状态组件
  COMPONENT: 6, //2,4的综合表示所有组件
  TEXT_CHILDREN: 8, //子节点为纯文本
  ARRAY_CHILDREN: 16, //子节点是数组
  SLOTS_CHILDREN: 32, //子节点包含插槽
  TELEPORT: 64, //Teleport
  SUSPENSE: 128, //suspense
};

function createVNode(
  type,//编译后的.vue文件形成的对象
  //<Comp hello="h"></Comp>
  //给组件传递的props
  props = null,
  children = null,//子组件
  patchFlag = 0,//patch的类型
  dynamicProps = null,//动态的props
  isBlockNode = false//是否是block节点
) {
  //通过__vccOpts判断是否是class组件
  if (isClassComponent(type)) {
    type = type.__vccOpts;
  }
  //将非字符串的class转化为字符串
  //将代理过的style浅克隆在转为标准化
  if (props) {
    //对于代理过的对象,我们需要克隆来使用他们
    //因为直接修改会导致触发响应式
    props = guardReactiveProps(props);
    let { class: klass, style } = props;
    if (klass && !shared.isString(klass)) {
      props.class = shared.normalizeClass(klass);
    }
    if (shared.isObject(style)) {
      if (reactivity.isProxy(style) && !shared.isArray(style)) {
        style = shared.extend({}, style);
      }
      props.style = shared.normalizeStyle(style);
    }
  }
  //生成当前type的类型
  let shapeFlag = 0;
  
  if (isString(type)) {
    //div span p等是ELEMENT
    shapeFlag = ShapeFlags.ELEMENT;
  } else if (isSuspense(type)) {
    shapeFlag = ShapeFlags.SUSPENSE;
  } else if (isTeleport(type)) {
    shapeFlag = ShapeFlags.TELEPORT;
  } else if (isObject(type)) {
    //对象则是有状态组件
    shapeFlag = ShapeFlags.STATEFUL_COMPONENT;
  } else if (isFunction(type)) {
    //如果是函数代表是无状态组件
    shapeFlag = ShapeFlags.FUNCTIONAL_COMPONENT;
  }
  //调用更基层的方法处理
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  );
}

<template>
  <div :class="{hello:true}" 
       :style="[{color:'red'},'background:red']">
  </div>
</template>
//编译后
const _hoisted_1 = {
  class:_normalizeClass({hello:true}),
  style:_normalizeStyle([{color:'red'},'background:red'])
}
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1))
}

//{hello:true,yes:false}=>"hello"
function normalizeClass(value) {
  let res = "";
  if (isString(value)) {
    res = value;
  } else if (isArray(value)) {
    for (let i = 0; i < value.length; i++) {
      const normalized = normalizeClass(value[i]);
      if (normalized) {
        res += normalized + " ";
      }
    }
  } else if (isObject(value)) {
    for (const name in value) {
      if (value[name]) {
        res += name + " ";
      }
    }
  }
  return res.trim();
}

//[{backgroundColor:'red',"color:red;"}]=>
//{backgroundColor:'red',color:'red'}
export function normalizeStyle(value) {
  if (isArray(value)) {
    const res = {};
    for (let i = 0; i < value.length; i++) {
      const item = value[i];
      const normalized = isString(item)
        ? parseStringStyle(item)
        : normalizeStyle(item);
      if (normalized) {
        for (const key in normalized) {
          res[key] = normalized[key];
        }
      }
    }
    return res;
  } else if (isString(value)) {
    return value;
  } else if (isObject(value)) {
    return value;
  }
}

const isSuspense = type => type.__isSuspense;
const isTeleport = type => type.__isTeleport;

function createBaseVNode(
  type,//创建的虚拟节点的类型
  props = null,//传递的props
  children = null,//子节点
  patchFlag = 0,//patch类型
  dynamicProps = null,//动态props
  shapeFlag = type === Fragment ? 0 : 1,//当前虚拟节点的类型
  isBlockNode = false,//是否是block
  needFullChildrenNormalization = false//是否需要标准化children
) {
  const vnode = {
    __v_isVNode: true, //这是一个vnode
    __v_skip: true, //不进行响应式代理
    type, //.vue文件编译后的对象
    props, //组件收到的props
    key: props && normalizeKey(props), //组件key
    ref: props && normalizeRef(props), //收集到的ref
    scopeId: getCurrentScopeId(),//当前作用域ID
    slotScopeIds: null, //插槽ID
    children, //child组件
    component: null, //组件实例
    suspense: null,//存放suspense
    ssContent: null,//存放suspense的default的虚拟节点
    ssFallback: null,//存放suspense的fallback的虚拟节点
    dirs: null, //解析到的自定义指令
    transition: null,
    el: null, //对应的真实DOM
    anchor: null, //插入的锚点
    target: null,//teleport的参数to指定的DOM
    targetAnchor: null,//teleport插入的锚点
    staticCount: 0,
    shapeFlag, //表示当前vNode的类型
    patchFlag, //path的模式
    dynamicProps, //含有动态的props
    dynamicChildren: null, //含有的动态children
    appContext: null, //app上下文
  };
  //是否需要对children进行标准化
  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children);
    //处理SUSPENSE逻辑
    if (shapeFlag & ShapeFlags.SUSPENSE) {
      //赋值ssContent=>default和ssFallback=>fallback
      type.normalize(vnode);
    }
  }
  //设置shapeFlags
  else if (children) {
    vnode.shapeFlag |= shared.isString(children)
      ? ShapeFlags.TEXT_CHILDREN
      : ShapeFlags.ARRAY_CHILDREN;
  }
  //警告key不能为NaN
  if (vnode.key !== vnode.key) {
    warn(`VNode created with invalid key (NaN). VNode type:`, vnode.type);
  }
  //判断是否加入dynamicChildren
  if (
    getBlockTreeEnabled() > 0 && //允许追踪
    !isBlockNode && //当前不是block
    getCurrentBlock() && //currentBlock存在
    //不是静态节点,或者是组件
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
  ) {
    //放入dynamicChildren
    getCurrentBlock().push(vnode);
  }
  return vnode;
}

//为了便于阅读修改了源码
function normalizeKey(props){
 const {key} = props
 return key != null ? key : null
}

function normalizeRef(props) {
 const { ref, ref_for, ref_key } = props;
 if (ref != null) {
  if (isString(ref) || isRef(ref) || isFunction(ref)) {
   const res = {
    //当前渲染的组件实例
    i: getCurrentRenderingInstance(),
    r: ref,
    k: ref_key,
    //<div v-for="a in c" ref="b"></div>
    //同时使用了ref和v-for会标记
    f: !!ref_for,
   };
   return res;
  }
  return ref
 }
 return null
}

<template>
  <Comp>
    <template v-slot:default>
      <div></div>
    </template>
    <template v-slot:header></template>
  </Comp>
</template>
//编译后
const _hoisted_1 = _createElementVNode("div", null, null, -1 )
function render(_ctx, _cache) {
  const _component_Comp = _resolveComponent("Comp", true)
  return (_openBlock(), _createBlock(_component_Comp, null, {
    default: _withCtx(() => [
      _hoisted_1
    ]),
    header: _withCtx(() => []),
    _: 1 
  }))
}

//STABLE
<Comp>
  <template v-slot:default></template>
</Comp>
//DYNAMIC
<Comp>
  <template v-slot:default v-if="a"></template>
</Comp>
//FORWORD
<Comp>
  <slot name="default"></slot>
</Comp>

function normalizeChildren(vnode, children) {
  let type = 0;//设置shapeFlag的初始值
  const { shapeFlag } = vnode;
  const currentRenderingInstance = getCurrentRenderingInstance();
  if (children == null) {
    children = null;
  }
  //如果children是数组,设置shapeFlags为ARRAY_CHILDREN
  //用户可以写createVNode(Comp,null,[Vnode1,Vnode2])
  //这样的形式,但是不推荐
  else if (shared.isArray(children)) {
    type = ShapeFlags.ARRAY_CHILDREN;
  }
  //处理"<Comp>插槽内容</Comp>"这种情况
  //如果你一定要自己写render函数官方推荐
  //对象形式,并返回一个函数的类型
  //createVNode(Comp,null.{default:()=>Vnode})
  else if (typeof children === "object") {
    //处理TELEPORT情况或ELEMENT情况
    if (shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.TELEPORT)) {
      //忽略这里的代码...
    }
    //这里对vnode打上slot的标识
    else {
      type = ShapeFlags.SLOTS_CHILDREN;
      //获取当前slot的slotFlag
      const slotFlag = children._;
      if (!slotFlag && !(InternalObjectKey in children)) {
        children._ctx = currentRenderingInstance;
      }
      //在组件中引用了当前slot 例如:<Comp><slot></slot></Comp>
      //这里的slot是当前组件实例传递的插槽就会被标记为FORWARDED
      else if (slotFlag === SlotFlags.FORWARDED && currentRenderingInstance) {
        //这里是引用当前实例传递的slot所以传递给children的slot类型
        //依然延续当前实例传递的slot
        if (currentRenderingInstance.slots._ === SlotFlags.STABLE) {
          children._ = SlotFlags.STABLE;
        } else {
          children._ = SlotFlags.DYNAMIC;
          //添加DYNAMIC_SLOTS
          vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS;
        }
      }
    }
  }
  //兼容函数写法
  
  else if (shared.isFunction(children)) {
    //重新包装children
    children = { default: children, _ctx: currentRenderingInstance };
    type = ShapeFlags.SLOTS_CHILDREN;
  } else {
    children = String(children);
    //强制让teleport children变为数组为了让他可以在任意处移动
    if (shapeFlag & ShapeFlags.TELEPORT) {
      type = ShapeFlags.ARRAY_CHILDREN;
      children = [createTextVNode(children)];
    }
    //child为text
    else {
      type = ShapeFlags.TEXT_CHILDREN;
    }
  }
  //挂载children、shapeFlag到vnode上
  vnode.children = children;
  vnode.shapeFlag |= type;
}

// Comment = Symbol('comment')
function createCommentVNode(text = "", asBlock = false) {
  return asBlock
    ? (openBlock(), createBlock(Comment, null, text))
    : createVNode(Comment, null, text);
}

// Text = Symbol('text')
function createTextVNode(text = " ", flag = 0) {
  return createVNode(Text, null, text, flag);
}

//Static = Symbol('static')
function createStaticVNode(content, numberOfNodes) {
  const vnode = createVNode(Static, null, content);
  vnode.staticCount = numberOfNodes;
  return vnode;
}

const render = (vnode, container) => {
  if (vnode == null) {
    //已经存在了 则卸载
    if (container._vnode) {
      unmount(container._vnode, null, null, true);
    }
  } else {
    //挂载元素
    patch(container._vnode || null, vnode, container, null, null, null);
  }
  flushPreFlushCbs();
  flushPostFlushCbs();
  //对于挂载过的container设置_vnode
  container._vnode = vnode;
};

  const PatchFlags = {
  DEV_ROOT_FRAGMENT: 2048,
  //动态插槽
  DYNAMIC_SLOTS: 1024,
  //不带key的fragment
  UNKEYED_FRAGMENT: 256,
  //带key的fragment
  KEYED_FRAGMENT: 128,
  //稳定的fragment
  STABLE_FRAGMENT: 64,
  //带有监听事件的节点
  HYDRATE_EVENTS: 32,
  FULL_PROPS: 16, //具有动态:key,key改变需要全量比较
  PROPS: 8, //动态属性但不包含style class属性
  STYLE: 4, //动态的style
  CLASS: 2, //动态的class
  TEXT: 1, //动态的文本
  HOISTED: -1, //静态节点
  BAIL: -2, //表示diff应该结束
};

const patch = (
  beforeVNode,//之前的Vnode
  currentVNode,//当前的Vnode
  container,//挂载的容器DOM
  anchor = null,//挂载的锚点
  parentComponent = null,//父组件
  parentSuspense = null,//父suspense
  isSVG = false,//是否是SVG
  slotScopeIds = null,//当前的插槽作用域ID
  //是否开启优化
  optimized = !!currentVNode.dynamicChildren
) => {
  //两个VNode相等 不做处理
  if (beforeVNode === currentVNode) {
    return null;
  }
  //如果不是同一个节点,卸载
  if (beforeVNode && !isSameVNodeType(beforeVNode, currentVNode)) {
    anchor = getNextHostNode(beforeVNode);
    unmount(beforeVNode, parentComponent, parentSuspense, true);
    beforeVNode = null;
  }
  if (currentVNode.patchFlag === PatchFlags.BAIL) {
    optimized = false;
    currentVNode.dynamicChildren = null;
  }
  const { type, ref, shapeFlag } = currentVNode;
  switch (type) {
    case Text:
      //处理Text
      break;
    case Comment:
      //处理注释节点
      break;
    case Static:
      //处理静态节点
      break;
    case Fragment:
      //处理Fragment节点
      break;
    default:
      if (shapeFlag & ShapeFlags) {
        //处理Element类型
      } else if (shapeFlag & 6) {
        //处理组件类型
        processComponent(
          beforeVNode,
          currentVNode,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          slotScopeIds,
          optimized
        );
      } else if (shapeFlag & ShapeFlags.TELEPORT) {
        //处理Teleport
      } else if (shapeFlag & ShapeFlags.SUSPENSE) {
        //处理Suspense
      }
      //都不匹配报错
      else {
        console.warn("Invalid VNode type:", type, `(${typeof type})`);
      }
  }
  //设置setupState和refs中的ref
  if (ref != null && parentComponent) {
    setRef(
      ref,
      beforeVNode && beforeVNode.ref,
      parentSuspense,
      currentVNode || beforeVNode,
      !currentVNode
    );
  }
};

function isSameVNodeType(beforeVNode,currentVNode){
  return (
    beforeVNode.type === currentVNode.type &&
    beforeVNode.key === currentVNode.key
  )
}

const getNextHostNode = (vnode) => {
  //如果当前虚拟节点类型是组件,组件没有真实DOM
  //找到subTree(render返回的节点)
  if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
    return getNextHostNode(vnode.component.subTree);
  }
  //调用suspense的next方法获取
  if (vnode.shapeFlag & ShapeFlags.SUSPENSE) {
    return vnode.suspense.next();
  }
  //获取当前节点的下一个兄弟节点
  return hostNextSibling(vnode.anchor || vnode.el);
};
//runtime-dom传递的方法
const nextSibling = node => node.nextSibling,

function setRef(
  rawRef,//当前的ref
  oldRawRef,//之前的ref
  parentSuspense,
  vnode,
  isUnmount = false
) {
  //是数组,分别设置
  if (shared.isArray(rawRef)) {
    rawRef.forEach((r, i) =>
      setRef(
        r,
        oldRawRef && (shared.isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
        parentSuspense,
        vnode,
        isUnmount
      )
    );
    return;
  }
  //1.如果当前节点是一个组件，那么传递给ref属性的将会是expose
  //或者proxy
  //2.如果不是组件那么refValue为当前节点的DOM
  const refValue =
    vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT
      ? getExposeProxy(vnode.component) || vnode.component.proxy
      : vnode.el;
  //如果卸载了则value为null
  const value = isUnmount ? null : refValue;
  //i:instance r:ref k:ref_key f:ref_for
  //当同时含有ref和for关键词的时候ref_for为true
  //之前createVNode的时候调用了normalizeRef将
  //ref设置为了一个包装后的对象。
  const { i: owner, r: ref } = rawRef;
  //警告
  if (!owner) {
    warn(
      `Missing ref owner context. ref cannot be used on hoisted vnodes. ` +
        `A vnode with ref must be created inside the render function.`
    );
    return;
  }
  const oldRef = oldRawRef && oldRawRef.r;
  //获取当前实例的refs属性，初始化refs
  const refs =
    Object.keys(owner.refs).length === 0 ? (owner.refs = {}) : owner.refs;
  //这里是setup函数调用的返回值
  const setupState = owner.setupState;
  
  //新旧ref不同，清除oldRef
  if (oldRef != null && oldRef !== ref) {
    //如果ref传递的字符串类型
    //将当前实例的refs属性对应的oldRef设置为null
    //清除setupState中的oldRef
    if (shared.isString(oldRef)) {
      refs[oldRef] = null;
      if (shared.hasOwn(setupState, oldRef)) {
        setupState[oldRef] = null;
      }
    } 
    //如果是响应式的ref,清空value
    else if (reactivity.isRef(oldRef)) {
      oldRef.value = null;
    }
  }
  //如果ref是一个函数(动态ref)
  //<div :ref="(el,refs)=>{}"></div>
  //调用这个函数传递value和refs
  if (shared.isFunction(ref)) {
    //vue的错误处理函数,包裹了try catch
    //错误监听就是依靠这个函数，不详细展开
    //简单理解为ref.call(owner,value,refs)
    callWithErrorHandling(ref, owner, 12, [value, refs]);
  } else {
    //判断ref类型,因为字符串ref和响应式ref处理不同
    const _isString = shared.isString(ref);
    const _isRef = reactivity.isRef(ref);
    if (_isString || _isRef) {
      //因为篇幅太长,放到下面讲解,此处省略deSet函数实现
      const doSet = function(){}
      //放入Vue调度的后置队列，在DOM更新后再设置ref
      if (value) {
        doSet.id = -1;
        queuePostRenderEffect(doSet, parentSuspense);
      } else {
        doSet();
      }
    } else {
      warn("Invalid template ref type:", ref, `(${typeof ref})`);
    }
  }
}

const doSet = () => {
  //<div v-for="a in b" :ref="c"></div>
  if (rawRef.f) {
    const existing = _isString ? refs[ref] : ref.value;
    //已经卸载了 要移除
    if (isUnmount) {
      shared.isArray(existing) && shared.remove(existing, refValue);
    } else {
      //不是数组,包装成数组,方便后续push
      if (!shared.isArray(existing)) {
        if (_isString) {
          refs[ref] = [refValue];
          //同时需要修改setupState中的ref
          if (shared.hasOwn(setupState, ref)) {
            setupState[ref] = refs[ref];
          }
        } 
        //如果是响应式的ref，修改value
        else {
          ref.value = [refValue];
        }
      }
      //已经存在了push
      else if (!existing.includes(refValue)) {
        existing.push(refValue);
      }
    }
  }
  //<div ref="a"></div>
  else if (_isString) {
    refs[ref] = value;
    if (shared.hasOwn(setupState, ref)) {
      setupState[ref] = value;
    }
  }
  //<div :ref="a"></div>
  else if (_isRef) {
    ref.value = value;
    //设置ref_key为value
    if (rawRef.k) refs[rawRef.k] = value;
  } else {
    warn("Invalid template ref type:", ref, `(${typeof ref})`);
  }
};

//处理Component类型的元素
const processComponent = (
  beforeVNode, //之前的Vnode 第一次挂载为null
  currentVNode, //当前的Vnode
  container, //挂载的容器
  anchor,//插入的锚点
  parentComponent, //父组件
  parentSuspense,//父suspense
  isSVG,//是否是SVG
  slotScopeIds,//插槽的作用域ID
  optimized//是否开启优化
) => {
  currentVNode.slotScopeIds = slotScopeIds;
  //不存在beforeVNode挂载
  if (beforeVNode == null) {
      mountComponent(
        currentVNode,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      );
  } 
  //更新
  else {
    updateComponent(beforeVNode, currentVNode, optimized);
  }
};