详解Vue.js3.0 组件是如何渲染为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(rendererOptions)) } // packages/runtime-core/src/renderer.ts export function createRenderer(options: RendererOptions) { return baseCreateRenderer(options) } 

 // packages/runtime-dom/src/nodeOps.ts export const n<strong style="color:transparent">本文来源gao@daima#com搞(%代@#码@网&</strong>odeOps = { createText: text => doc.createTextNode(text), setText: (node, text) => {}, // 其他方法 } 

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