Vue.js組件實現渲染DOM的原理解析

import { createApp } from 'vue'
import App from './app'

const app = createApp(App)

app.mount('#app')

// packages/runtime-dom/src/index.ts
// 創建應用
const createApp = ((...args) => {
 // 1. 創建 app 對象
 const app = ensureRenderer().createApp(...args)
 
 const { mount } = app
 // 2. 重寫 mount 方法
 app.mount = (containerOrSelector) => {
  // ...
 }
 
 return app
})

// packages/runtime-dom/src/index.ts
// 定義渲染器變量
let renderer

// 創建一個渲染器對象
// 惰性創建渲染器（當用戶只依賴響應式包的時候可以通過 tree-shaking 的方式移除核心渲染邏輯相關的代碼）
function ensureRenderer() {
 return renderer || (renderer = createRenderer(rendererOptions))
}

// packages/runtime-core/src/renderer.ts
export function createRenderer(options) {
 return baseCreateRenderer(options)
}

// 創建不同平臺渲染器的函數，在其內部都會調用 baseCreateRenderer
function baseCreateRenderer(options, createHydrationFns) {
 // 一系列內部函數
 const render = (vnode, container) => {
  // 組件渲染的核心邏輯
 }
 
 // 返回渲染器對象
 return {
  render,
  hydrate,
  createApp: createAppAPI(render, hydrate)
 }
}

// packages/runtime-core/src/apiCreateApp.ts
// 接收一個渲染器 render 作為參數，接收一個可選參數 hydrate，返回一個用于創建 app 的函數
export function createAppAPI(render, hydrate) {
 // createApp 接收兩個參數：根組件對象和根組件的prop
 return function createApp(rootComponent, rootProps = null) {
  const context = createAppContext()
  const app: App = (context.app = {
   _uid: uid++,
   _component: rootComponent,
   _props: rootProps,
   _container: null,
   _context: context,
   version,
   get config() {},
   set config(v) {},
   use(plugin: Plugin, ...options: any[]) {},
   mixin(mixin: ComponentOptions) {},
   component(name: string, component?: Component): any {},
   directive(name: string, directive?: Directive) {},
   mount(rootContainer: HostElement, isHydrate?: boolean): any {
    // 創建根組件的 vnode
    const vnode = createVNode(rootComponent, rootProps)
    // 利用函數參數傳入的渲染器渲染 vnode
    render(vnode, rootContainer)
    app._container = rootContainer
    return vnode.component.proxy
   },
   unmount() {},
   provide(key, value) {}
  }
 return app
 }
}

// packages/runtime-dom/src/index.ts
const { mount } = app
app.mount = (containerOrSelector): any => {
 // 1. 標準化容器（將傳入的 DOM 對象或者節點選擇器統一為 DOM 對象）
 const container = normalizeContainer(containerOrSelector)
 if (!container) return
 
 const component = app._component
 // 2. 標準化組件（如果根組件不是函數，并且沒有 render 函數和 template 模板，則把根組件 innerHTML 作為 template）
 if (!isFunction(component) && !component.render && !component.template) {
  component.template = container.innerHTML
 }

 // 3. 掛載前清空容器的內容
 container.innerHTML = ''
 
 // 4. 執行渲染器創建 app 對象時定義的 mount 方法（在后文中稱之為「標準 mount 函數」）來渲染根組件
 const proxy = mount(container)
 
 return proxy
}

// packages/runtime-core/src/apiCreateApp.ts
// createAppAPI 函數內部返回的 createApp 函數中定義了 app 對象，mount 函數是 app 對象的方法之一
mount(rootContainer, isHydrate) {
 // 1. 創建根組件的 vnode
 const vnode = createVNode(rootComponent, rootProps)
 // 2. 利用函數參數傳入的渲染器渲染 vnode
 render(vnode, rootContainer)
 
 app._container = rootContainer
 
 return vnode.component.proxy
},

// packages/runtime-core/src/vnode.ts
function _createVNode(type, props, children, 
            patchFlag, dynamicProps, isBlockNode = false) {
 // 1. 對 VNodeTypes 或 ClassComponent 類型的 type 進行各種標準化處理：規范化 vnode、規范化 component、規范化 CSS 類和樣式
 
 // 2. 將 vnode 類型信息編碼為位圖
 const shapeFlag = isString(type)
  ? ShapeFlags.ELEMENT
  : __FEATURE_SUSPENSE__ && isSuspense(type)
   ? ShapeFlags.SUSPENSE
   : isTeleport(type)
    ? ShapeFlags.TELEPORT
    : isObject(type)
     ? ShapeFlags.STATEFUL_COMPONENT
     : isFunction(type)
      ? ShapeFlags.FUNCTIONAL_COMPONENT
      : 0

 // 3. 創建 vnode 對象
 const vnode = {
  __v_isVNode: true,
  [ReactiveFlags.SKIP]: true,
  type, // 把函數入參 type 賦值給 vnode 
  props,
  children: null,
  component: null,
  staticCount: 0,
  shapeFlag, // 把 vnode 類型信息賦值給 vnode
  // 還有很多屬性
 }

 // 4. 標準化子節點 children
 normalizeChildren(vnode, children)

 return vnode
}

export const createVNode = (__DEV__
 ? createVNodeWithArgsTransform
 : _createVNode) as typeof _createVNode

function _createVNode(
 type: VNodeTypes | ClassComponent | typeof NULL_DYNAMIC_COMPONENT,
 props: (Data & VNodeProps) | null = null
): VNode { }

// 返回渲染器對象
return {
 render,
 hydrate,
 createApp: createAppAPI(render, hydrate)
}

// packages/runtime-core/src/renderer.ts
const render = (vnode, container) => {
 if (vnode == null) {
  // 如果 vnode 為 null，但是容器中有 vnode，則銷毀組件
  if (container._vnode) {
   unmount(container._vnode, null, null, true)
  }
 } else {
  // 創建或更新組件
  patch(container._vnode || null, vnode, container)
 }

 // packages/runtime-core/src/scheduler.ts
 flushPostFlushCbs()
 
 // 緩存 vnode 節點（標識該 vnode 已經完成渲染）
 container._vnode = vnode
}

// packages/runtime-core/src/renderer.ts
const patch = (
 n1,
 n2,
 container,
 anchor = null,
 parentComponent = null,
 parentSuspense = null,
 isSVG = false,
 optimized = false
) => {
 // 1. 如果是更新 vnode 并且新舊 vnode 類型不一致，則銷毀舊的 vnode
 if (n1 && !isSameVNodeType(n1, n2)) {
  anchor = getNextHostNode(n1)
  unmount(n1, parentComponent, parentSuspense, true)
  n1 = null
 }

 // 2. 處理不同類型節點的渲染
 const { type, ref, shapeFlag } = n2
 switch (type) {
  case Text:
   // 處理文本節點
   processText(n1, n2, container, anchor)
   break
  case Comment:
   // 處理注釋節點
   break
  case Static:
   // 處理靜態節點
   break
  case Fragment:
   // 處理 Fragment 元素（https://v3.vuejs.org/guide/migration/fragments.html#fragments）
   break
  default:
   if (shapeFlag & ShapeFlags.ELEMENT) {
    // 處理普通 DOM 元素
   } else if (shapeFlag & ShapeFlags.COMPONENT) {
    // 處理組件
   } else if (shapeFlag & ShapeFlags.TELEPORT) {
    // 處理 TELEPORT
   } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
    // 處理 SUSPENSE
   } else if (__DEV__) {
    warn('Invalid VNode type:', type, `(${typeof type})`)
   }
 }
}

// packages/runtime-core/src/renderer.ts
const {
 insert: hostInsert,
 remove: hostRemove,
 patchProp: hostPatchProp,
 forcePatchProp: hostForcePatchProp,
 createElement: hostCreateElement,
 createText: hostCreateText,
 createComment: hostCreateComment,
 setText: hostSetText,
 setElementText: hostSetElementText,
 parentNode: hostParentNode,
 nextSibling: hostNextSibling,
 setScopeId: hostSetScopeId = NOOP,
 cloneNode: hostCloneNode,
 insertStaticContent: hostInsertStaticContent
} = options

// packages/runtime-core/src/renderer.ts
// 在調用 baseCreateRenderer 時，傳入了渲染參數
function baseCreateRenderer(options: RendererOptions) { }

// packages/runtime-dom/src/index.ts
// 創建應用
const createApp = ((...args) => {
 // 1. 創建 app 對象
 const app = ensureRenderer().createApp(...args)
 
 return app
})

// packages/runtime-dom/src/index.ts
const rendererOptions = extend({ patchProp, forcePatchProp }, nodeOps)

function ensureRenderer() {
 return renderer || (renderer = createRenderer<Node, Element>(rendererOptions))
}

// packages/runtime-core/src/renderer.ts
export function createRenderer<
 HostNode = RendererNode,
 HostElement = RendererElement
>(options: RendererOptions<HostNode, HostElement>) {
 return baseCreateRenderer<HostNode, HostElement>(options)
}

// packages/runtime-dom/src/nodeOps.ts
export const nodeOps = {
 createText: text => doc.createTextNode(text),
 setText: (node, text) => {},
 // 其他方法
}

const doc = (typeof document !== 'undefined' ? document : null) as Document