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

前情提要
1. Mount函数
2. 创建虚拟节点的几个方法
(1) createVNode:用于创建组件的虚拟节点
(2) createElementVNode:用于创建普通tag的虚拟节点如<div></div>
(3) createCommentVNode:用于创建注释的虚拟节点
(4) createTextVNode:用于创建文本的虚拟节点
(5) createStaticVNode:用于创建静态的虚拟节点,没有使用任何变量的标签就是静态节点
3. patch函数
4. 总结

前情提要

本文我们接着Vue3源码系列(1)-createApp发生了什么?继续分析,我们知道调用createApp方法之后会返回一个app对象，紧接着我们会调用mount方法将节点挂载到页面上。所以本文我们从mount方法开始分析组件的挂载流程。

本文主要内容

Vue如何创建组件虚拟节点、文本虚拟节点、注释虚拟节点、静态虚拟节点。
ShapeFlags是什么？
PatchFlags是什么？
我们在Vue中写的class和style形式掺杂不一、何时进行的标准化、如何进行标准化。
创建虚拟节点时对插槽的处理。
ref可以写三种形式，字符串形式、响应式形式、函数形式、patch阶段如何实现他们的更新和设置。

1. Mount函数

 
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)\``
  );
 }
}

这个函数主要判断当前app是否已经调用过mount函数了,如果已经调用过mount函数了那么警告用户。
createVnode根据编译后的.vue文件生成对应的虚拟节。
render函数用于将createVnode生成的虚拟节点挂载到用户传入的container中。
在介绍创建虚拟节点的方法之前我们先来说说shapeFlag: 它用来表示当前虚拟节点的类型。我们可以通过对shapeFlag做二进制运算来描述当前节点的本身是什么类型、子节点是什么类型。

 
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
};

2. 创建虚拟节点的几个方法

(1) createVNode:用于创建组件的虚拟节点

 
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;
  /*
    这部分我修改了源码,便于读者理解
    suspense teleport放到前面是因为
    他们本身就是一个对象,如果放到后面
    会导致先中标isObject那么shapeFlag
    的赋值会出错。
    判断当前type的类型,赋值给shapeFlag
    后续就可以通过shapeFlag来判断当前虚拟
    节点的类型。
  */
  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
  );
}

createVNode主要是对传递的type做出判断,通过赋值shapeFlag来标明当前的虚拟节点的类型。
如果props含有style或者class要进行标准化。
例如<div :style="['background:red',{color:'red'}]"></div>其中第一个是cssText形式、第二个是对象形式，他们应该被转化为对象类型所以转化后应该为<div style={color:'red',background:'red'}></div>。当然对于class也需要标准化:class={hello:true,world:false} => :class="hello"。但是这里处理的其实是用户自己写了render函数,而对于使用了Vue自带的编译系统之后,是不需要做这一层处理的。我们可以来看这样一段编译后的代码。

 
<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))
}

所以编译后的template,在调用createVNode的时候传递的props就已经是经过处理的了。
我们忽略guardReactiveProps方法，来探寻一下normalizeStyle以及normalizeClass方法
normalizeClass: 这个方法用于标准化class。用户可能会写数组形式,对象形式,以及字符串形式,字符串形式和对象形式很好理解,对于数组形式,递归调用了normalizeClass意味着你可以传递多层的数组形式的参数,例如:[{hello:true},[{yes:true}],'good'] => hello yes good

 
//{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();
}

normalizeStyle: 这个方法用于标准化style。同样用户可以传递数组、对象、字符串三种形式。字符串形式的就是cssText形式,这种形式需要调用parseStringStyle方法。例如:"background:red;color:red"对于这样的字符串需要转化为对象就需要切割";"和":"符号得到key和value然后再转化为对象。同时这也是parseStringStyle的作用,这个函数就不展开讲了。而对象形式则是标准化形式，遍历即可。

 
//[{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;
  }
}

当然还有判断函数isTeleport和isSuspense，对于Teleport和Suspense他们是Vue内部实现的组件，所以他们自带属性__isTeleport和__Suspense属性。

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

(2) createElementVNode:用于创建普通tag的虚拟节点如<div></div>

特别提示:

createElementVNode就是createBaseVNode方法,创建组件的虚拟节点方法createVNode必须标准化children，needFullChildrenNormalization=true

 
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;
}

createBaseVNode: 这个方法用于创建一个虚拟节点,同时对key、ref、chidren(needFullChildrenNormalization为true)进行标准化。如果有children给shapeFlag赋值。同时往dynamicChildren中添加虚拟节点，这个咱们后面在进行讲解。
normalizeKey: 用于标准化props中的key属性

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

normalizeRef: 用于标准化props中的ref属性。ref可以是字符串，可以是reactivity中的ref对象，也可以是一个函数。如果是以上三种形式，将虚拟节点的ref属性包装成一个对象。其中i代表当前渲染的组件实例、ref代表原本的ref值、ref_for代表在这个标签中传递了ref和v-for两个属性。例如: <div ref="a"></div> 字符串形式; <div :ref="a"></div> ref对象形式; <div :ref="()=>{}"></div>函数形式

 
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,
    //&lt;div v-for="a in c" ref="b"&gt;&lt;/div&gt;
    //同时使用了ref和v-for会标记
    f: !!ref_for,
   };
   return res;
  }
  return ref
 }
 return null
}

在介绍noramlizeChildren之前，我们必须要介绍一下插槽，因为这个函数主要是对插槽进行的处理，插槽其实就是给组件传递children属性，在组件内部可以复用这部分template。首先我们先来看看对使用了插槽的组件的编译后结果。

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

目前我们对于createBlock简单理解为调用createVNode方法即可。这个实例使用的具名插槽，所以编译结果createBlock的第三个参数children是一个对象，键就是具名插槽的名称，值则是<template>的编译结果。其中"_"属性代表的是当前插槽的类型。
STABLE:1 代表当前插槽处于稳定状态，插槽的结构不会发生变化。
DYNAMIC:2 代表当前的插槽处于动态状态，插槽的结构可能发生改变。
FORWORD:3 代表当前的插槽处于转发状态。

 
//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>

normalizeChildren: 标准化虚拟节点的children属性，主要是对slots属性的处理。用户可能自己实现了render函数，那么对于插槽的创建没有直接通过Vue编译得到的数据完整，需要对其进行标准化。首先判断当前是否传递了插槽，如果传递了判断children的类型数组类型:(不推荐这个方式)打上ARRAY_CHILDREN的标记;对象类型:(这个方式是推荐的)但是可能是FORWORD类型，所以当前插槽的类型应当继承当前实例的插槽的类型。函数类型:重新包装children，其中函数作为children的default属性。当然createVNode(Comp,null,'123')也可以是字符串这将被当做是Text类型，最终将标准化的children和type赋值到虚拟节点上。

 
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;
        }
      }
    }
  }
  //兼容函数写法
  /**
   * createVnode(Comp,null,()=>h())
   * children为作为default
   */
  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;
}

(3) createCommentVNode:用于创建注释的虚拟节点

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

(4) createTextVNode:用于创建文本的虚拟节点

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

(5) createStaticVNode:用于创建静态的虚拟节点,没有使用任何变量的标签就是静态节点

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

3. patch函数

好的。介绍完了几个创建虚拟节点的方法，我们接着mount的流程，调用render函数
render: 如果当前DOM实例已经挂载过了，那么需要先卸载挂载的节点、调用patch执行挂载流程、最后执行Vue的前置和后置调度器缓存的函数。

 
const render = (vnode, container) =&gt; {
  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;
};

这个函数比较简单，我们主要把注意力集中到patch函数上，这个函数相当的重要。
在介绍patch函数之前我们同样介绍一个重要的标识符PatchFlags---靶向更新标识。在编译阶段会判断当前的节点是否包含动态的props、动态style、动态class、fragment是否稳定、当key属性是动态的时候需要全量比较props等。这样就可以在更新阶段判断patchFlag来实现靶向更新。比较特殊的有HOISTED:-1表示静态节点不需要diff(HMR的时候还是需要,用户可能手动直接改变静态节点)，BAIL表示应该结束patch。

 
  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应该结束
};

patch: 主要比较beforeVNode和currentVNode的不同，执行不同的更新或者挂载流程。如果beforeVNode为null则为挂载流程反之则为更新流程。同时需要判断当前VNode的类型调用不同的处理函数。例如:对于普通HTML类型调用processElement，对于组件类型调用processComponent。我们本节主要讲的就是组件的挂载流程。
首先判断beforeVNode和currentVNode是否为同一个对象，如果是同一个对象表示不需要更新。
然后判断beforeVNode和currentVNode的type与key是否相等，如果不等，表示节点需要被卸载。例如:<div></div> => <p></p>节点发生了改变，需要被卸载。这里需要注意的是:Vue的diff进行的是同层同节点比较，type和key将作为新旧节点是否是同一个的判断标准。

 
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
    );
  }
};

isSameVNodeType: 主要判断新旧虚拟节点是否是同一个节点。

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

getNextHostNode: 用于获取当前虚拟节点的真实DOM的下一个兄弟节点。

 
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,

setRef: 设置ref属性。同时在更新阶段ref也需要被更新。
如果rawRef为一个数组遍历这个数组分别调用setRef方法。
获取refValue，如果当前虚拟节点是组件则是组件的expose或proxy(这取决你有没有设置expose属性，expose具体使用请查询官方文档)，否则就是当前虚拟节点的真实DOM。
清除掉setupState、refs中的oldRef。如果设置的ref属性值是响应式的ref创建的，清空ref.value。
创建doSet方法，如果存在refValue，则在DOM更新后再执行doSet，否则现在就执行。

 
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可以是一个字符串<div ref="a"></div>
   ref可以是一个响应式ref对象<div :ref="a"></div>
   ref还可以是一个函数<div :ref="f"></div>
   setup(){
    retunr {a:ref(null),f(refValue){}}
   }
  */
  //新旧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})`);
    }
  }
}

doSet: 主要对setupState、refs中的ref属性进行设置。
如果在一个标签中使用了v-for和ref，那么设置的ref必须是一个数组，v-for可能渲染多个节点。如果设置的ref是响应式创建的，那么修改value值。
如果没有同时使用v-for和ref，修改对应的setupState和refs中的ref即可。

 
const doSet = () =&gt; {
  //&lt;div v-for="a in b" :ref="c"&gt;&lt;/div&gt;
  if (rawRef.f) {
    const existing = _isString ? refs[ref] : ref.value;
    //已经卸载了 要移除
    if (isUnmount) {
      shared.isArray(existing) &amp;&amp; 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);
      }
    }
  }
  //&lt;div ref="a"&gt;&lt;/div&gt;
  else if (_isString) {
    refs[ref] = value;
    if (shared.hasOwn(setupState, ref)) {
      setupState[ref] = value;
    }
  }
  //&lt;div :ref="a"&gt;&lt;/div&gt;
  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})`);
  }
};

processComponent: 处理组件的挂载和更新。如果beforeVNode为null则执行挂载流程;否则执行更新流程。

 
//处理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);
  }
};

4. 总结

到这里我们就分析完了组件挂载之前的所有流程。组件的挂载流程我们将在下一小节继续讨论。
mount方法主要调用了createVNode方法创建虚拟节点，然后调用render函数进行了渲染。
然后我们分析了创建文本、注释、静态、HTML元素、组件五种类型的虚拟节点的创建方法。
最后我们讲解了patch阶段如何设置ref属性。

	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;
	/*
	这部分我修改了源码,便于读者理解
	suspense teleport放到前面是因为
	他们本身就是一个对象,如果放到后面
	会导致先中标isObject那么shapeFlag
	的赋值会出错。
	判断当前type的类型,赋值给shapeFlag
	后续就可以通过shapeFlag来判断当前虚拟
	节点的类型。
	*/
	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 /* HOISTED */)
	function render(_ctx, _cache) {
	const _component_Comp = _resolveComponent("Comp", true)
	return (_openBlock(), _createBlock(_component_Comp, null, {
	default: _withCtx(() => [
	_hoisted_1
	]),
	header: _withCtx(() => []),
	_: 1 /* STABLE */
	}))
	}

	//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;
	}
	}
	}
	}
	//兼容函数写法
	/**
	* createVnode(Comp,null,()=>h())
	* children为作为default
	*/
	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
	)
	}

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

目录

前情提要

1. Mount函数

2. 创建虚拟节点的几个方法

(1) createVNode:用于创建组件的虚拟节点

(2) createElementVNode:用于创建普通tag的虚拟节点如<div></div>

(3) createCommentVNode:用于创建注释的虚拟节点

(4) createTextVNode:用于创建文本的虚拟节点

(5) createStaticVNode:用于创建静态的虚拟节点,没有使用任何变量的标签就是静态节点

3. patch函数

4. 总结

	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可以是一个字符串<div ref="a"></div>
	ref可以是一个响应式ref对象<div :ref="a"></div>
	ref还可以是一个函数<div :ref="f"></div>
	setup(){
	retunr {a:ref(null),f(refValue){}}
	}
	*/
	//新旧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);
	}
	};