[[439941]]

1寫在前面

在VUE中，組件是一個非常重要的概念，整個應用的頁面都是通過組件進行渲染實現的，但是我們在編寫組件時，它們內部又是如何進行工作的呢?從我們開始編寫組件，到最終轉為真實DOM，是一個怎樣的轉變過程呢?那么我們應該先來了解vue3中組件時如何渲染的?

2組件

組件是一個抽象概念，它是對一棵DOM樹的抽象，在頁面寫一個組件節點：，它并不會在頁面上渲染這個叫的標簽。我們在寫組件時，應該內部時這樣的：

<template> 
    <div class="test"> 
    <p>hello world</p> 
  </div>   
</template> 

那么，一個組件想要真正渲染成DOM需要以下幾個步驟:

• 創建VNode
• 渲染VNode
• 生成真實DOM

這里的VNode是什么，其實就是能夠描述組件信息的Javascript對象。

3應用程序初始化

一個組件可以通過"模板+對象描述"的方式創建組件，創建好后又是如何被調用并進行初始化的呢?

因為整個組件樹是從根組件開始進行渲染的，要尋找到根組件的渲染入口，需要從應用程序的初始化過程開始分析。

我們分別看下vue2和vue3初始化應用代碼有啥區別，但其實沒多大區別。

//vue2  
import Vue from "vue"; 
import App from "./App"; 
 
const app = new Vue({ 
    render:h=>h(App); 
}) 
 
app.$mount("#app"); 
 
//vue3 
import {createApp} from "vue"; 
import App from "./app"; 
const app = createApp(App); 
app.mount("#app"); 

接下來我們看看createApp內部實現：

export const createApp = ((...args) => { 
  //創建app對象 
  const app = ensureRenderer().createApp(...args) 
 
  if (__DEV__) { 
    injectNativeTagCheck(app) 
  } 
 
  const { mount } = app 
    //重寫mount方法 
  app.mount = (containerOrSelector: Element | string): any => { 
    const container = normalizeContainer(containerOrSelector) 
    if (!container) return 
    const component = app._component 
    if (!isFunction(component) && !component.render && !component.template) { 
      component.template = container.innerHTML 
    } 
    // clear content before mounting 
    container.innerHTML = '' 
    const proxy = mount(container) 
    container.removeAttribute('v-cloak') 
    return proxy 
  } 
 
  return app 
}) as CreateAppFunction<Element> 

我們看到const app = ensureRenderer().createApp(...args)用來創建app對象，那么其內部是如何實現的：

//渲染相關的一些配置，比如：更新屬性的方法，操作DOM的方法 
const rendererOptions = { 
  patchProp,  // 處理 props 屬性  
  ...nodeOps // 處理 DOM 節點操作 
} 
 
// lazy create the renderer - this makes core renderer logic tree-shakable 
// in case the user only imports reactivity utilities from Vue. 
 
let renderer: Renderer | HydrationRenderer 
 
let enabledHydration = false 
// 我們看到中文翻譯就是：延時創建渲染器，當用戶只依賴響應式包的時候，不會立即創建渲染器， 
// 可以通過tree-shakable移除核心渲染邏輯相關的代碼 
function ensureRenderer() { 
  return renderer || (renderer = createRenderer(rendererOptions)) 
} 

渲染器，這是為了跨平臺渲染做準備的，簡單理解就是：包含平臺渲染邏輯的js對象。我們看到創建渲染器，是通過調用createRenderer來實現的，其通過調用baseCreateRenderer函數進行返回，其中就有我們要找的createApp: createAppAPI(render, hydrate)。

export function createRenderer< 
  HostNode = RendererNode, 
  HostElement = RendererElement 
>(options: RendererOptions<HostNode, HostElement>) { 
  return baseCreateRenderer<HostNode, HostElement>(options) 
} 
 
// 
function baseCreateRenderer( 
  options: RendererOptions, 
  createHydrationFns?: typeof createHydrationFunctions 
): any { 
  const { 
    insert: hostInsert, 
    remove: hostRemove, 
    patchProp: hostPatchProp, 
    createElement: hostCreateElement, 
    createText: hostCreateText, 
    createComment: hostCreateComment, 
    setText: hostSetText, 
    setElementText: hostSetElementText, 
    parentNode: hostParentNode, 
    nextSibling: hostNextSibling, 
    setScopeId: hostSetScopeId = NOOP, 
    cloneNode: hostCloneNode, 
    insertStaticContent: hostInsertStaticContent 
  } = options 
 
  // ....此處省略兩千行，我們先不管 
 
  return { 
    render, 
    hydrate, 
    createApp: createAppAPI(render, hydrate) 
  } 
} 

我們看到createAppAPI(render, hydrate)方法接受兩個參數：根組件渲染函數render，可選參數hydrate是在SSR場景下應用的，這里先不關注。

export function createAppAPI<HostElement>( 
  render: RootRenderFunction, 
  hydrate?: RootHydrateFunction 
): CreateAppFunction<HostElement> { 
  //createApp方法接受的兩個參數：根組件的對象和prop 
  return function createApp(rootComponent, rootProps = null) { 
    if (rootProps != null && !isObject(rootProps)) { 
      __DEV__ && warn(`root props passed to app.mount() must be an object.`) 
      rootProps = null 
    } 
 
    // 創建默認APP配置 
    const context = createAppContext() 
    const installedPlugins = new Set() 
 
    let isMounted = false 
 
    const app: App = { 
      _component: rootComponent as Component, 
      _props: rootProps, 
      _container: null, 
      _context: context, 
 
      get config() { 
        return context.config 
      }, 
 
      set config(v) { 
        if (__DEV__) { 
          warn( 
            `app.config cannot be replaced. Modify individual options instead.` 
          ) 
        } 
      }, 
 
      // 都是一些眼熟的方法 
      use() {}, 
      mixin() {}, 
      component() {}, 
      directive() {}, 
      //用于掛載組件 
      mount(rootContainer){ 
        //創建根組件的VNode 
        const vnode = createVNode(rootComponent,rootProps); 
        //利用渲染器渲染VNode 
        render(vnode,rootContainer); 
        app._container = rootComponent; 
        return vnode.component.proxy; 
      } 
 
      // ... 
    } 
     
     
    return app 
  } 
} 

在整個app對象的創建過程中，vue.js利用 閉包和函數柯里化 的技巧，很好的實現參數保留。如：在執行app.mount的時候，不需要傳入渲染器render，因為在執行createAppAPI的時候，渲染器render參數已經被保留下來。

我們知道在vue源碼中已經將mount方法已經進行封裝，但是在我們使用時為什么還要進行重寫，而不是直接把相關邏輯放在app對象的mount方法內部實現呢?

重寫的目的是：實現既能讓用戶在使用API時更加靈活，也可以兼容Vue2的寫法。

這是因為vue.js不僅僅是為web平臺服務的，其設計的目標是"星辰大海"--實現支持跨平臺渲染，內部不能夠包含任何指定平臺的內容，createApp函數內部的app.mount方法是一個標準的可跨平臺的組件渲染流程：先創建VNode，再渲染VNode。

mount(rootContainer){ 
  //創建根組件的VNode 
  const vnode = createVNode(rootComponent,rootProps); 
  //利用渲染器渲染VNode 
  render(vnode,rootContainer); 
  app._container = rootComponent; 
  return vnode.component.proxy; 
} 

我們看到app.mount重寫的代碼如下：

//重寫mount方法 
app.mount = (containerOrSelector: Element | string): any => { 
  //標準化容器 
  const container = normalizeContainer(containerOrSelector) 
  //如果容器為空對象，就直接返回呢 
  if (!container) return 
  const component = app._component 
  //如果組件對象沒有定義render函數和template模板，則直接取出容器的innerHTML方法作為組件模板內容 
  if (!isFunction(component) && !component.render && !component.template) { 
    component.template = container.innerHTML 
  } 
  //在掛載前清空容器內容 clear content before mounting 
  container.innerHTML = '' 
  //實現真正的掛載 
  const proxy = mount(container) 
  container.removeAttribute('v-cloak') 
  return proxy 
} 

4核心渲染流程：創建VNode和渲染VNode

vnode本質上用來描述DOM的Javascript對象，它在vue中可以描述不同節點，比如：普通元素節點、組件節點等。

我們可以使用vnode來表示button標簽：

• type：標簽的類型
• props：標簽的DOM屬性信息
• children：DOM的子節點，vnode數組

const vnode = { 
  //標簽的類型 
 type:"button", 
  //標簽的DOM屬性信息 
  props:{ 
   "class":"btn", 
    style:{ 
     width:"100px", 
      height:"100px" 
    } 
  }, 
  //dom的子節點，vnode數組 
  children:"確認" 
} 

那么，我們可以使用vnode來對抽象事物的描述，比如用來表示組件標簽，頁面并不會真正渲染一個叫做HelloWorld的標簽元素，而是渲染組件內部定義的原生的HTML標簽元素。

const HelloWorld = { 
 //定義組件對象信息 
} 
 
const vnode = { 
 type:HelloWorld, 
  props:{ 
   msg:"test" 
  } 
} 

我們在想：vnode到底有什么優勢，為什么一定要設計成vnode這樣的數據結構?

• 抽象：引入vnode，可以將渲染過程抽象化，從而使得組件的抽象能力有所提升。
• 跨平臺：因為patch vnode過程不同平臺可以有自己的實現，給予vnode再做服務端渲染、weex平臺、小程序平臺的渲染。

但是呢，注意：使用vnode并不意味著不用操作真實DOM。很多人會誤認為vnode的性能一定會比手動操作DOM好，但其實并不是一定的。這是因為：

• 基于vnode實現的MVVM框架，在每次render to vnode過程中，渲染組件會有一定的javascript耗時，尤其是大組件
• 當我們去更新組件時，可以感覺到明顯的卡頓現象。雖然diff算法在減少DOM操作方面足夠優秀，但最終還是免不了操作DOM，所以性能并不能說是絕對優勢

創建VNode

我們前面捋了一遍源碼，知道vue中是通過createVNode函數創建根組件的vnode的。

const vnode = createVNode(rootComponent,rootProps); 
 
//createVNode函數的大致實現流程 
function createVNode(type,props=null,children=null){ 
 if(props){ 
   //處理props的相關邏輯，標準化class和style 
  } 
  //對于vnode類型信息編碼 
  const shapeFlag = isString(type)  
  ? 1/*ELEMENT*/ : isSuspense(type)  
  ? 128 /*SUSPENSE*/ : isTeleport(type) 
  ? 64 /*TELEPORT*/ : isObject(type) 
  ? 4 /*STATEFUL_COMPONENT*/ : isFunction(type) 
  ? 2 /*FUNCTIONAL_COMPONENT*/ : 0 
   
  const vnode = { 
   type, 
    props, 
    shapeFlag, 
    //其他屬性 
  } 
   
  //標準化子節點，把不同數據類型的children轉成數組或文本類型 
  normalizeChildren(vnode,children) 
  return vnode 
} 

渲染VNode

render(vnode,rootContainer) 
function render(vnode,rootContainer){ 
 //判斷是否為空 
  if(vnode == null){ 
    //如果為空，執行銷毀組件的邏輯 
   if(container._vnode){ 
     unmount(container._vnode,null,null,true) 
    } 
  }else{ 
   //創建或更新組件 
    patch(container._vnode||null,vnode,container) 
  } 
  //緩存vnode節點，表示已經渲染 
  container._vnode = vnode 
} 

那么在渲染vnode過程中涉及道到的patch補丁函數是如何實現的：

function patch( 
 n1,//舊的vnode，當n1==null時，表示時一次掛載的過程 
  n2,//新的vnode，后續會根據這個vnode類型執行不同的處理邏輯 
  container,//表示dom容器，在vnode渲染生成DOM后，會掛載到container下面 
  anchor=null, 
  parentComponent=null, 
  parentSuspense=null, 
  isSVG=false, 
  optimized=false 
){ 
 //如果存在新舊節點，且新舊節點類型不同，則銷毀舊節點 
  if(n1&&!isSameVNodeType(n1,n2)){ 
   anchor = getNextHostNode(n1); 
    unmount(n1,parentComponent,parentSuspense,true); 
    n1 = null; 
  } 
  const {type,shapeFlag} = n2; 
    switch(type){ 
      case Test: 
        //處理文本節點 
       break 
      case Comment: 
        //處理注釋節點 
        break 
      case Static: 
        //處理靜態節點 
        break 
      case Fragment: 
        //處理Fragment元素 
        break 
      default: 
        if(shapeFlag & 1 /*ELEMENT*/){ 
         //處理普通DOM元素 
          processElemnt( 
            n1, 
            n2, 
            container, 
            anchor, 
            parentComponent, 
            parentSuspense, 
            isSVG, 
            optimized 
          ) 
        }else if(shapeFlag & 64 /*TELEPORT*/){ 
         //處理普通TELEPORT 
          processElemnt( 
            n1, 
            n2, 
            container, 
            anchor, 
            parentComponent, 
            parentSuspense, 
            isSVG, 
            optimized 
          ) 
        }else if(){ 
         
        }else if(){ 
         
        }else if(){ 
         
        } 
    } 
} 

我們看下處理組件的parentComponent函數的實現：

function parentComponent( 
  n1, 
   n2, 
   container, 
   anchor, 
   parentComponent, 
   parentSuspense, 
   isSVG, 
   optimized 
){ 
 if(n1==null){ 
   //掛載組件 
    mountComponent( 
     n1, 
      n2, 
      container, 
      anchor, 
      parentComponent, 
      parentSuspense, 
      isSVG, 
      optimized 
    ) 
  }else{ 
   //更新組件 
    updateComponent( 
     n1, 
      n2, 
      parentComponent, 
      optimized 
    ) 
  }    
} 

關于組件實例：

• 創建組件實例：內部通過對象的方式創建了當前渲染的組件實例
• 設置組件實例：instance保留了很多組件相關的數據，維護了組件的上下文，包括對props、插槽以及其他實例的屬性的初始化處理

初始渲染主要做兩件事情：

• 渲染組件生成subTree
• 把subTree掛載到container中

再回到我們夢開始的地方，我們看到在HelloWorld組件內部，整個DOM節點對應的vnode執行renderComponentRoot渲染生成對應的subTree，我們可以把它成為"子樹vnode"。

<template> 
    <div class="test">//test被稱為子樹vnode 
    <p>hello world</p> 
  </div>   
</template> 

如果是其它平臺比如weex等，hostCreateElment方法就不再是操作DOM，而是平臺相關的API，這些平臺相關的方法是在創建渲染器階段作為參數傳入的。

創建完DOM節點后，要判斷如果有props，就給這個DOM節點添加相關的class、style、event等屬性，并在hostPatchProp函數內部做相關的處理邏輯。

5嵌套組件

在生產開發中，App和hello組件的例子就是嵌套組件的場景，組件vnode主要維護著組件的定義對象，組件上的各種props，而組件本身是一個抽象節點，它自身的渲染其實是通過執行組件定義的render函數渲染生成的子樹vnode完成的，然后再通過patch這種遞歸方式，無論組件嵌套層級多深，都可以完成整個組件樹的渲染。

6參考文章

• 《Vue3核心源碼解析》
• 《Vue中文社區》
• 《Vue3中文文檔》

7寫在最后

本文主要分析總結了組件的渲染流程，從入口開始層層分析組件渲染過程的源碼，我們知道了一個組件想要真正渲染成DOM需要以下三個步驟:

• 創建VNode
• 渲染VNode
• 生成真實DOM