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

猪猪爱前端 3666 阅读 0 评论 0 点赞

(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属性。

以上就是Vue3源码分析组件挂载创建虚拟节点的详细内容，更多关于Vue3组件挂载创建虚拟节点的资料请关注阿兔在线工具其它相关文章！

本文分类：JavaScript
本文标签：Vue 组件挂载创建虚拟节点
浏览次数：3666 次浏览
发布日期：2022-09-02 02:12:52
本文链接：http://atool.online/javascript/108227.html
原文链接：https://juejin.cn/post/7155535206340886541

上一篇 > Vue computed实现原理深入讲解
下一篇 > Vue3源码分析组件挂载初始化props与slots