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