Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點

更新時間：2022年10月21日 15:13:42 作者：豬豬愛前端

這篇文章主要為大家介紹了Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

(1) createVNode:用于創(chuàng)建組件的虛擬節(jié)點
(2) createElementVNode:用于創(chuàng)建普通tag的虛擬節(jié)點如<div></div>
(3) createCommentVNode:用于創(chuàng)建注釋的虛擬節(jié)點
(4) createTextVNode:用于創(chuàng)建文本的虛擬節(jié)點
(5) createStaticVNode:用于創(chuàng)建靜態(tài)的虛擬節(jié)點,沒有使用任何變量的標(biāo)簽就是靜態(tài)節(jié)點

3. patch函數(shù)

4. 總結(jié)

前情提要

本文我們接著Vue3源碼系列(1)-createApp發(fā)生了什么?繼續(xù)分析,我們知道調(diào)用createApp方法之后會返回一個app對象，緊接著我們會調(diào)用mount方法將節(jié)點掛載到頁面上。所以本文我們從mount方法開始分析組件的掛載流程。

本文主要內(nèi)容

Vue如何創(chuàng)建組件虛擬節(jié)點、文本虛擬節(jié)點、注釋虛擬節(jié)點、靜態(tài)虛擬節(jié)點。
ShapeFlags是什么？
PatchFlags是什么？
我們在Vue中寫的class和style形式摻雜不一、何時進行的標(biāo)準(zhǔn)化、如何進行標(biāo)準(zhǔn)化。
創(chuàng)建虛擬節(jié)點時對插槽的處理。
ref可以寫三種形式，字符串形式、響應(yīng)式形式、函數(shù)形式、patch階段如何實現(xiàn)他們的更新和設(shè)置。

1. Mount函數(shù)

mount(rootContainer) {
 //判斷當(dāng)前返回的app是否已經(jīng)調(diào)用過mount方法
 if (!isMounted) {
 //如果當(dāng)前組件已經(jīng)有了app
 //實例則已經(jīng)掛載了警告用戶
 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.`
  );
 }
 //創(chuàng)建組件的VNode
 const vNode = createVNode(rootComponent);
 //剛才調(diào)用createApp創(chuàng)建的上下文
 vNode.appContext = context;
 render(vNode, rootContainer); //渲染虛擬DOM
 //標(biāo)記已經(jīng)掛載了
 isMounted = true;
 //建立app與DOM的關(guān)聯(lián)
 app._container = rootContainer;
 rootContainer.__vue_app__ = app;
 //建立app與組件的關(guān)聯(lián)
 app._instance = vNode.component;
 }
 //已經(jīng)調(diào)用過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)\``
  );
 }
}

這個函數(shù)主要判斷當(dāng)前app是否已經(jīng)調(diào)用過mount函數(shù)了,如果已經(jīng)調(diào)用過mount函數(shù)了那么警告用戶。
createVnode根據(jù)編譯后的.vue文件生成對應(yīng)的虛擬節(jié)。
render函數(shù)用于將createVnode生成的虛擬節(jié)點掛載到用戶傳入的container中。
在介紹創(chuàng)建虛擬節(jié)點的方法之前我們先來說說shapeFlag: 它用來表示當(dāng)前虛擬節(jié)點的類型。我們可以通過對shapeFlag做二進制運算來描述當(dāng)前節(jié)點的本身是什么類型、子節(jié)點是什么類型。

export const ShapeFlags = {
  ELEMENT: 1, //HTML SVG 或普通DOM元素
  FUNCTIONAL_COMPONENT: 2, //函數(shù)式組件
  STATEFUL_COMPONENT: 4, //有狀態(tài)組件
  COMPONENT: 6, //2,4的綜合表示所有組件
  TEXT_CHILDREN: 8, //子節(jié)點為純文本
  ARRAY_CHILDREN: 16, //子節(jié)點是數(shù)組
  SLOTS_CHILDREN: 32, //子節(jié)點包含插槽
  TELEPORT: 64, //Teleport
  SUSPENSE: 128, //suspense
};

2. 創(chuàng)建虛擬節(jié)點的幾個方法

(1) createVNode:用于創(chuàng)建組件的虛擬節(jié)點

function createVNode(
  type,//編譯后的.vue文件形成的對象
  //<Comp hello="h"></Comp>
  //給組件傳遞的props
  props = null,
  children = null,//子組件
  patchFlag = 0,//patch的類型
  dynamicProps = null,//動態(tài)的props
  isBlockNode = false//是否是block節(jié)點
) {
  //通過__vccOpts判斷是否是class組件
  if (isClassComponent(type)) {
    type = type.__vccOpts;
  }
  //將非字符串的class轉(zhuǎn)化為字符串
  //將代理過的style淺克隆在轉(zhuǎn)為標(biāo)準(zhǔn)化
  if (props) {
    //對于代理過的對象,我們需要克隆來使用他們
    //因為直接修改會導(dǎo)致觸發(fā)響應(yīng)式
    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);
    }
  }
  //生成當(dāng)前type的類型
  let shapeFlag = 0;
  /*
    這部分我修改了源碼,便于讀者理解
    suspense teleport放到前面是因為
    他們本身就是一個對象,如果放到后面
    會導(dǎo)致先中標(biāo)isObject那么shapeFlag
    的賦值會出錯。
    判斷當(dāng)前type的類型,賦值給shapeFlag
    后續(xù)就可以通過shapeFlag來判斷當(dāng)前虛擬
    節(jié)點的類型。
  */
  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)) {
    //對象則是有狀態(tài)組件
    shapeFlag = ShapeFlags.STATEFUL_COMPONENT;
  } else if (isFunction(type)) {
    //如果是函數(shù)代表是無狀態(tài)組件
    shapeFlag = ShapeFlags.FUNCTIONAL_COMPONENT;
  }
  //調(diào)用更基層的方法處理
  return createBaseVNode(
    type,
    props,
    children,
    patchFlag,
    dynamicProps,
    shapeFlag,
    isBlockNode,
    true
  );
}

createVNode主要是對傳遞的type做出判斷,通過賦值shapeFlag來標(biāo)明當(dāng)前的虛擬節(jié)點的類型。
如果props含有style或者class要進行標(biāo)準(zhǔn)化。
例如<div :style="['background:red',{color:'red'}]"></div>其中第一個是cssText形式、第二個是對象形式，他們應(yīng)該被轉(zhuǎn)化為對象類型所以轉(zhuǎn)化后應(yīng)該為<div style={color:'red',background:'red'}></div>。當(dāng)然對于class也需要標(biāo)準(zhǔn)化:class={hello:true,world:false} => :class="hello"。但是這里處理的其實是用戶自己寫了render函數(shù),而對于使用了Vue自帶的編譯系統(tǒng)之后,是不需要做這一層處理的。我們可以來看這樣一段編譯后的代碼。

<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,在調(diào)用createVNode的時候傳遞的props就已經(jīng)是經(jīng)過處理的了。
我們忽略guardReactiveProps方法，來探尋一下normalizeStyle以及normalizeClass方法
normalizeClass: 這個方法用于標(biāo)準(zhǔn)化class。用戶可能會寫數(shù)組形式,對象形式,以及字符串形式,字符串形式和對象形式很好理解,對于數(shù)組形式,遞歸調(diào)用了normalizeClass意味著你可以傳遞多層的數(shù)組形式的參數(shù),例如:[{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: 這個方法用于標(biāo)準(zhǔn)化style。同樣用戶可以傳遞數(shù)組、對象、字符串三種形式。字符串形式的就是cssText形式,這種形式需要調(diào)用parseStringStyle方法。例如:"background:red;color:red"對于這樣的字符串需要轉(zhuǎn)化為對象就需要切割";"和":"符號得到key和value然后再轉(zhuǎn)化為對象。同時這也是parseStringStyle的作用,這個函數(shù)就不展開講了。而對象形式則是標(biāo)準(zhǔn)化形式，遍歷即可。

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

當(dāng)然還有判斷函數(shù)isTeleport和isSuspense，對于Teleport和Suspense他們是Vue內(nèi)部實現(xiàn)的組件，所以他們自帶屬性__isTeleport和__Suspense屬性。

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

(2) createElementVNode:用于創(chuàng)建普通tag的虛擬節(jié)點如<div></div>

特別提示:

createElementVNode就是createBaseVNode方法,創(chuàng)建組件的虛擬節(jié)點方法createVNode必須標(biāo)準(zhǔn)化children，needFullChildrenNormalization=true

function createBaseVNode(
  type,//創(chuàng)建的虛擬節(jié)點的類型
  props = null,//傳遞的props
  children = null,//子節(jié)點
  patchFlag = 0,//patch類型
  dynamicProps = null,//動態(tài)props
  shapeFlag = type === Fragment ? 0 : 1,//當(dāng)前虛擬節(jié)點的類型
  isBlockNode = false,//是否是block
  needFullChildrenNormalization = false//是否需要標(biāo)準(zhǔn)化children
) {
  const vnode = {
    __v_isVNode: true, //這是一個vnode
    __v_skip: true, //不進行響應(yīng)式代理
    type, //.vue文件編譯后的對象
    props, //組件收到的props
    key: props && normalizeKey(props), //組件key
    ref: props && normalizeRef(props), //收集到的ref
    scopeId: getCurrentScopeId(),//當(dāng)前作用域ID
    slotScopeIds: null, //插槽ID
    children, //child組件
    component: null, //組件實例
    suspense: null,//存放suspense
    ssContent: null,//存放suspense的default的虛擬節(jié)點
    ssFallback: null,//存放suspense的fallback的虛擬節(jié)點
    dirs: null, //解析到的自定義指令
    transition: null,
    el: null, //對應(yīng)的真實DOM
    anchor: null, //插入的錨點
    target: null,//teleport的參數(shù)to指定的DOM
    targetAnchor: null,//teleport插入的錨點
    staticCount: 0,
    shapeFlag, //表示當(dāng)前vNode的類型
    patchFlag, //path的模式
    dynamicProps, //含有動態(tài)的props
    dynamicChildren: null, //含有的動態(tài)children
    appContext: null, //app上下文
  };
  //是否需要對children進行標(biāo)準(zhǔn)化
  if (needFullChildrenNormalization) {
    normalizeChildren(vnode, children);
    //處理SUSPENSE邏輯
    if (shapeFlag & ShapeFlags.SUSPENSE) {
      //賦值ssContent=>default和ssFallback=>fallback
      type.normalize(vnode);
    }
  }
  //設(shè)置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 && //當(dāng)前不是block
    getCurrentBlock() && //currentBlock存在
    //不是靜態(tài)節(jié)點,或者是組件
    (vnode.patchFlag > 0 || shapeFlag & ShapeFlags.COMPONENT) &&
    vnode.patchFlag !== PatchFlags.HYDRATE_EVENTS
  ) {
    //放入dynamicChildren
    getCurrentBlock().push(vnode);
  }
  return vnode;
}

createBaseVNode: 這個方法用于創(chuàng)建一個虛擬節(jié)點,同時對key、ref、chidren(needFullChildrenNormalization為true)進行標(biāo)準(zhǔn)化。如果有children給shapeFlag賦值。同時往dynamicChildren中添加虛擬節(jié)點，這個咱們后面在進行講解。
normalizeKey: 用于標(biāo)準(zhǔn)化props中的key屬性

//為了便于閱讀修改了源碼
function normalizeKey(props){
 const {key} = props
 return key != null ? key : null
}

normalizeRef: 用于標(biāo)準(zhǔn)化props中的ref屬性。ref可以是字符串，可以是reactivity中的ref對象，也可以是一個函數(shù)。如果是以上三種形式，將虛擬節(jié)點的ref屬性包裝成一個對象。其中i代表當(dāng)前渲染的組件實例、ref代表原本的ref值、ref_for代表在這個標(biāo)簽中傳遞了ref和v-for兩個屬性。例如: <div ref="a"></div> 字符串形式; <div :ref="a"></div> ref對象形式; <div :ref="()=>{}"></div>函數(shù)形式

function normalizeRef(props) {
 const { ref, ref_for, ref_key } = props;
 if (ref != null) {
  if (isString(ref) || isRef(ref) || isFunction(ref)) {
   const res = {
    //當(dāng)前渲染的組件實例
    i: getCurrentRenderingInstance(),
    r: ref,
    k: ref_key,
    //&lt;div v-for="a in c" ref="b"&gt;&lt;/div&gt;
    //同時使用了ref和v-for會標(biāo)記
    f: !!ref_for,
   };
   return res;
  }
  return ref
 }
 return null
}

在介紹noramlizeChildren之前，我們必須要介紹一下插槽，因為這個函數(shù)主要是對插槽進行的處理，插槽其實就是給組件傳遞children屬性，在組件內(nèi)部可以復(fù)用這部分template。首先我們先來看看對使用了插槽的組件的編譯后結(jié)果。

<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簡單理解為調(diào)用createVNode方法即可。這個實例使用的具名插槽，所以編譯結(jié)果createBlock的第三個參數(shù)children是一個對象，鍵就是具名插槽的名稱，值則是<template>的編譯結(jié)果。其中"_"屬性代表的是當(dāng)前插槽的類型。

STABLE:1 代表當(dāng)前插槽處于穩(wěn)定狀態(tài)，插槽的結(jié)構(gòu)不會發(fā)生變化。
DYNAMIC:2 代表當(dāng)前的插槽處于動態(tài)狀態(tài)，插槽的結(jié)構(gòu)可能發(fā)生改變。
FORWORD:3 代表當(dāng)前的插槽處于轉(zhuǎn)發(fā)狀態(tài)。

//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: 標(biāo)準(zhǔn)化虛擬節(jié)點的children屬性，主要是對slots屬性的處理。用戶可能自己實現(xiàn)了render函數(shù)，那么對于插槽的創(chuàng)建沒有直接通過Vue編譯得到的數(shù)據(jù)完整，需要對其進行標(biāo)準(zhǔn)化。首先判斷當(dāng)前是否傳遞了插槽，如果傳遞了判斷children的類型數(shù)組類型:(不推薦這個方式)打上ARRAY_CHILDREN的標(biāo)記;對象類型:(這個方式是推薦的)但是可能是FORWORD類型，所以當(dāng)前插槽的類型應(yīng)當(dāng)繼承當(dāng)前實例的插槽的類型。函數(shù)類型:重新包裝children，其中函數(shù)作為children的default屬性。當(dāng)然createVNode(Comp,null,'123')也可以是字符串這將被當(dāng)做是Text類型，最終將標(biāo)準(zhǔn)化的children和type賦值到虛擬節(jié)點上。

function normalizeChildren(vnode, children) {
  let type = 0;//設(shè)置shapeFlag的初始值
  const { shapeFlag } = vnode;
  const currentRenderingInstance = getCurrentRenderingInstance();
  if (children == null) {
    children = null;
  }
  //如果children是數(shù)組,設(shè)置shapeFlags為ARRAY_CHILDREN
  //用戶可以寫createVNode(Comp,null,[Vnode1,Vnode2])
  //這樣的形式,但是不推薦
  else if (shared.isArray(children)) {
    type = ShapeFlags.ARRAY_CHILDREN;
  }
  //處理"<Comp>插槽內(nèi)容</Comp>"這種情況
  //如果你一定要自己寫render函數(shù)官方推薦
  //對象形式,并返回一個函數(shù)的類型
  //createVNode(Comp,null.{default:()=>Vnode})
  else if (typeof children === "object") {
    //處理TELEPORT情況或ELEMENT情況
    if (shapeFlag & (ShapeFlags.ELEMENT | ShapeFlags.TELEPORT)) {
      //忽略這里的代碼...
    }
    //這里對vnode打上slot的標(biāo)識
    else {
      type = ShapeFlags.SLOTS_CHILDREN;
      //獲取當(dāng)前slot的slotFlag
      const slotFlag = children._;
      if (!slotFlag && !(InternalObjectKey in children)) {
        children._ctx = currentRenderingInstance;
      }
      //在組件中引用了當(dāng)前slot 例如:<Comp><slot></slot></Comp>
      //這里的slot是當(dāng)前組件實例傳遞的插槽就會被標(biāo)記為FORWARDED
      else if (slotFlag === SlotFlags.FORWARDED && currentRenderingInstance) {
        //這里是引用當(dāng)前實例傳遞的slot所以傳遞給children的slot類型
        //依然延續(xù)當(dāng)前實例傳遞的slot
        if (currentRenderingInstance.slots._ === SlotFlags.STABLE) {
          children._ = SlotFlags.STABLE;
        } else {
          children._ = SlotFlags.DYNAMIC;
          //添加DYNAMIC_SLOTS
          vnode.patchFlag |= PatchFlags.DYNAMIC_SLOTS;
        }
      }
    }
  }
  //兼容函數(shù)寫法
  /**
   * 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變?yōu)閿?shù)組為了讓他可以在任意處移動
    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:用于創(chuàng)建注釋的虛擬節(jié)點

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

(4) createTextVNode:用于創(chuàng)建文本的虛擬節(jié)點

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

(5) createStaticVNode:用于創(chuàng)建靜態(tài)的虛擬節(jié)點,沒有使用任何變量的標(biāo)簽就是靜態(tài)節(jié)點

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

3. patch函數(shù)

好的。介紹完了幾個創(chuàng)建虛擬節(jié)點的方法，我們接著mount的流程，調(diào)用render函數(shù)
render: 如果當(dāng)前DOM實例已經(jīng)掛載過了，那么需要先卸載掛載的節(jié)點、調(diào)用patch執(zhí)行掛載流程、最后執(zhí)行Vue的前置和后置調(diào)度器緩存的函數(shù)。

const render = (vnode, container) =&gt; {
  if (vnode == null) {
    //已經(jīng)存在了 則卸載
    if (container._vnode) {
      unmount(container._vnode, null, null, true);
    }
  } else {
    //掛載元素
    patch(container._vnode || null, vnode, container, null, null, null);
  }
  flushPreFlushCbs();
  flushPostFlushCbs();
  //對于掛載過的container設(shè)置_vnode
  container._vnode = vnode;
};

這個函數(shù)比較簡單，我們主要把注意力集中到patch函數(shù)上，這個函數(shù)相當(dāng)?shù)闹匾?/li>
在介紹patch函數(shù)之前我們同樣介紹一個重要的標(biāo)識符PatchFlags---靶向更新標(biāo)識。在編譯階段會判斷當(dāng)前的節(jié)點是否包含動態(tài)的props、動態(tài)style、動態(tài)class、fragment是否穩(wěn)定、當(dāng)key屬性是動態(tài)的時候需要全量比較props等。這樣就可以在更新階段判斷patchFlag來實現(xiàn)靶向更新。比較特殊的有HOISTED:-1表示靜態(tài)節(jié)點不需要diff(HMR的時候還是需要,用戶可能手動直接改變靜態(tài)節(jié)點)，BAIL表示應(yīng)該結(jié)束patch。

  const PatchFlags = {
  DEV_ROOT_FRAGMENT: 2048,
  //動態(tài)插槽
  DYNAMIC_SLOTS: 1024,
  //不帶key的fragment
  UNKEYED_FRAGMENT: 256,
  //帶key的fragment
  KEYED_FRAGMENT: 128,
  //穩(wěn)定的fragment
  STABLE_FRAGMENT: 64,
  //帶有監(jiān)聽事件的節(jié)點
  HYDRATE_EVENTS: 32,
  FULL_PROPS: 16, //具有動態(tài):key,key改變需要全量比較
  PROPS: 8, //動態(tài)屬性但不包含style class屬性
  STYLE: 4, //動態(tài)的style
  CLASS: 2, //動態(tài)的class
  TEXT: 1, //動態(tài)的文本
  HOISTED: -1, //靜態(tài)節(jié)點
  BAIL: -2, //表示diff應(yīng)該結(jié)束
};

patch: 主要比較beforeVNode和currentVNode的不同，執(zhí)行不同的更新或者掛載流程。如果beforeVNode為null則為掛載流程反之則為更新流程。同時需要判斷當(dāng)前VNode的類型調(diào)用不同的處理函數(shù)。例如:對于普通HTML類型調(diào)用processElement，對于組件類型調(diào)用processComponent。我們本節(jié)主要講的就是組件的掛載流程。
首先判斷beforeVNode和currentVNode是否為同一個對象，如果是同一個對象表示不需要更新。
然后判斷beforeVNode和currentVNode的type與key是否相等，如果不等，表示節(jié)點需要被卸載。例如:<div></div> => <p></p>節(jié)點發(fā)生了改變，需要被卸載。這里需要注意的是:Vue的diff進行的是同層同節(jié)點比較，type和key將作為新舊節(jié)點是否是同一個的判斷標(biāo)準(zhǔn)。

const patch = (
  beforeVNode,//之前的Vnode
  currentVNode,//當(dāng)前的Vnode
  container,//掛載的容器DOM
  anchor = null,//掛載的錨點
  parentComponent = null,//父組件
  parentSuspense = null,//父suspense
  isSVG = false,//是否是SVG
  slotScopeIds = null,//當(dāng)前的插槽作用域ID
  //是否開啟優(yōu)化
  optimized = !!currentVNode.dynamicChildren
) => {
  //兩個VNode相等 不做處理
  if (beforeVNode === currentVNode) {
    return null;
  }
  //如果不是同一個節(jié)點,卸載
  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:
      //處理注釋節(jié)點
      break;
    case Static:
      //處理靜態(tài)節(jié)點
      break;
    case Fragment:
      //處理Fragment節(jié)點
      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})`);
      }
  }
  //設(shè)置setupState和refs中的ref
  if (ref != null && parentComponent) {
    setRef(
      ref,
      beforeVNode && beforeVNode.ref,
      parentSuspense,
      currentVNode || beforeVNode,
      !currentVNode
    );
  }
};

isSameVNodeType: 主要判斷新舊虛擬節(jié)點是否是同一個節(jié)點。

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

getNextHostNode: 用于獲取當(dāng)前虛擬節(jié)點的真實DOM的下一個兄弟節(jié)點。

const getNextHostNode = (vnode) => {
  //如果當(dāng)前虛擬節(jié)點類型是組件,組件沒有真實DOM
  //找到subTree(render返回的節(jié)點)
  if (vnode.shapeFlag & ShapeFlags.COMPONENT) {
    return getNextHostNode(vnode.component.subTree);
  }
  //調(diào)用suspense的next方法獲取
  if (vnode.shapeFlag & ShapeFlags.SUSPENSE) {
    return vnode.suspense.next();
  }
  //獲取當(dāng)前節(jié)點的下一個兄弟節(jié)點
  return hostNextSibling(vnode.anchor || vnode.el);
};
//runtime-dom傳遞的方法
const nextSibling = node => node.nextSibling,

setRef: 設(shè)置ref屬性。同時在更新階段ref也需要被更新。

如果rawRef為一個數(shù)組遍歷這個數(shù)組分別調(diào)用setRef方法。
獲取refValue，如果當(dāng)前虛擬節(jié)點是組件則是組件的expose或proxy(這取決你有沒有設(shè)置expose屬性，expose具體使用請查詢官方文檔)，否則就是當(dāng)前虛擬節(jié)點的真實DOM。
清除掉setupState、refs中的oldRef。如果設(shè)置的ref屬性值是響應(yīng)式的ref創(chuàng)建的，清空ref.value。
創(chuàng)建doSet方法，如果存在refValue，則在DOM更新后再執(zhí)行doSet，否則現(xiàn)在就執(zhí)行。

function setRef(
  rawRef,//當(dāng)前的ref
  oldRawRef,//之前的ref
  parentSuspense,
  vnode,
  isUnmount = false
) {
  //是數(shù)組,分別設(shè)置
  if (shared.isArray(rawRef)) {
    rawRef.forEach((r, i) =>
      setRef(
        r,
        oldRawRef && (shared.isArray(oldRawRef) ? oldRawRef[i] : oldRawRef),
        parentSuspense,
        vnode,
        isUnmount
      )
    );
    return;
  }
  //1.如果當(dāng)前節(jié)點是一個組件，那么傳遞給ref屬性的將會是expose
  //或者proxy
  //2.如果不是組件那么refValue為當(dāng)前節(jié)點的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
  //當(dāng)同時含有ref和for關(guān)鍵詞的時候ref_for為true
  //之前createVNode的時候調(diào)用了normalizeRef將
  //ref設(shè)置為了一個包裝后的對象。
  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;
  //獲取當(dāng)前實例的refs屬性，初始化refs
  const refs =
    Object.keys(owner.refs).length === 0 ? (owner.refs = {}) : owner.refs;
  //這里是setup函數(shù)調(diào)用的返回值
  const setupState = owner.setupState;
  /*
   ref可以是一個字符串<div ref="a"></div>
   ref可以是一個響應(yīng)式ref對象<div :ref="a"></div>
   ref還可以是一個函數(shù)<div :ref="f"></div>
   setup(){
    retunr {a:ref(null),f(refValue){}}
   }
  */
  //新舊ref不同，清除oldRef
  if (oldRef != null && oldRef !== ref) {
    //如果ref傳遞的字符串類型
    //將當(dāng)前實例的refs屬性對應(yīng)的oldRef設(shè)置為null
    //清除setupState中的oldRef
    if (shared.isString(oldRef)) {
      refs[oldRef] = null;
      if (shared.hasOwn(setupState, oldRef)) {
        setupState[oldRef] = null;
      }
    } 
    //如果是響應(yīng)式的ref,清空value
    else if (reactivity.isRef(oldRef)) {
      oldRef.value = null;
    }
  }
  //如果ref是一個函數(shù)(動態(tài)ref)
  //<div :ref="(el,refs)=>{}"></div>
  //調(diào)用這個函數(shù)傳遞value和refs
  if (shared.isFunction(ref)) {
    //vue的錯誤處理函數(shù),包裹了try catch
    //錯誤監(jiān)聽就是依靠這個函數(shù)，不詳細展開
    //簡單理解為ref.call(owner,value,refs)
    callWithErrorHandling(ref, owner, 12, [value, refs]);
  } else {
    //判斷ref類型,因為字符串ref和響應(yīng)式ref處理不同
    const _isString = shared.isString(ref);
    const _isRef = reactivity.isRef(ref);
    if (_isString || _isRef) {
      //因為篇幅太長,放到下面講解,此處省略deSet函數(shù)實現(xiàn)
      const doSet = function(){}
      //放入Vue調(diào)度的后置隊列，在DOM更新后再設(shè)置ref
      if (value) {
        doSet.id = -1;
        queuePostRenderEffect(doSet, parentSuspense);
      } else {
        doSet();
      }
    } else {
      warn("Invalid template ref type:", ref, `(${typeof ref})`);
    }
  }
}

doSet: 主要對setupState、refs中的ref屬性進行設(shè)置。

如果在一個標(biāo)簽中使用了v-for和ref，那么設(shè)置的ref必須是一個數(shù)組，v-for可能渲染多個節(jié)點。如果設(shè)置的ref是響應(yīng)式創(chuàng)建的，那么修改value值。
如果沒有同時使用v-for和ref，修改對應(yīng)的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;
    //已經(jīng)卸載了 要移除
    if (isUnmount) {
      shared.isArray(existing) &amp;&amp; shared.remove(existing, refValue);
    } else {
      //不是數(shù)組,包裝成數(shù)組,方便后續(xù)push
      if (!shared.isArray(existing)) {
        if (_isString) {
          refs[ref] = [refValue];
          //同時需要修改setupState中的ref
          if (shared.hasOwn(setupState, ref)) {
            setupState[ref] = refs[ref];
          }
        } 
        //如果是響應(yīng)式的ref，修改value
        else {
          ref.value = [refValue];
        }
      }
      //已經(jīng)存在了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;
    //設(shè)置ref_key為value
    if (rawRef.k) refs[rawRef.k] = value;
  } else {
    warn("Invalid template ref type:", ref, `(${typeof ref})`);
  }
};

processComponent: 處理組件的掛載和更新。如果beforeVNode為null則執(zhí)行掛載流程;否則執(zhí)行更新流程。

//處理Component類型的元素
const processComponent = (
  beforeVNode, //之前的Vnode 第一次掛載為null
  currentVNode, //當(dāng)前的Vnode
  container, //掛載的容器
  anchor,//插入的錨點
  parentComponent, //父組件
  parentSuspense,//父suspense
  isSVG,//是否是SVG
  slotScopeIds,//插槽的作用域ID
  optimized//是否開啟優(yōu)化
) => {
  currentVNode.slotScopeIds = slotScopeIds;
  //不存在beforeVNode掛載
  if (beforeVNode == null) {
      mountComponent(
        currentVNode,
        container,
        anchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      );
  } 
  //更新
  else {
    updateComponent(beforeVNode, currentVNode, optimized);
  }
};

4. 總結(jié)

到這里我們就分析完了組件掛載之前的所有流程。組件的掛載流程我們將在下一小節(jié)繼續(xù)討論。

mount方法主要調(diào)用了createVNode方法創(chuàng)建虛擬節(jié)點，然后調(diào)用render函數(shù)進行了渲染。
然后我們分析了創(chuàng)建文本、注釋、靜態(tài)、HTML元素、組件五種類型的虛擬節(jié)點的創(chuàng)建方法。
最后我們講解了patch階段如何設(shè)置ref屬性。

以上就是Vue3源碼分析組件掛載創(chuàng)建虛擬節(jié)點的詳細內(nèi)容，更多關(guān)于Vue3組件掛載創(chuàng)建虛擬節(jié)點的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: