核心是将组件变成 vnode -> 再将 vnode 变成真实 dom -> 插入到页面上

应用初始化

  1. <body>
  2.     <div id="app"></div>
  3.     <script>
  4.         let { createApp } = VueRuntimeDOM;
  5.         let App = {
  6.             render() {
  7.                 console.log('render');
  8.             }
  9.         }
  10.         let app = createApp(App, { name: 'hh', age: 12 })
  11.         app.mount('#app')
  12.     </script>
  13. </body>

调用createApp 会返回一个app对象，有个mount 方法

createApp 简化版源码

ackages/runtime-dom/src/index.ts

  1. // packages/runtime-dom/src/index.ts
  2. // 定义渲染器
  3. let renderer;
  5. // 创建一个渲染器
  6. function ensureRenderer() {
  7.     return renderer || (renderer = createRenderer(rendererOptions))
  8.  }
  10. export const createApp = ((...args) => {
  11.     // 创建 app 对象
  12.     const app = ensureRenderer().createApp(...args)
  14.     const { mount } = app
  15.     // 重写 mount方法
  16.     app.mount = (containerOrSelector) => {
  17.         // 拿到容器元素
  18.       const container = normalizeContainer(containerOrSelector)
  19.       if (!container) return
  21.       // 挂载之前清空容器
  22.       container.innerHTML = ''
  23.       // 调用原始 mount方法
  24.       mount(container);
  26.       //将组建渲染成dom元素进行挂载，这是 runtime-core 要做的事情
  27.     }
  30.     return app
  31.   })

调app.mount 方法首先要清空容器里面的东西。
createApp 方法中主要做了两件事：

  1. 创建 app 对象
  2. 重写 app.mount 方法

创建 app 对象

  1. // packages/runtime-core/src/renderer.ts
  2. // 创建渲染器
  3. export function createRenderer(options) {
  4.     return baseCreateRenderer(options)
  5. }
  7.   // 创建不同平台渲染器的函数，在其内部都会调用 baseCreateRenderer
  8.   function baseCreateRenderer(options, createHydrationFns) {
  9.     // 一系列内部函数
  10.     const render = (vnode, container) => {
  11.       // 组件渲染的核心逻辑
  12.     }
  14.     // 返回渲染器对象
  15.     return {
  16.       render,
  17.       hydrate,
  18.       createApp: createAppAPI(render, hydrate)
  19.     }
  20.   }

可以看出渲染器最终由 baseCreateRenderer 函数生成，是一个包含 render 和createApp 函数的 JS 对象。其中 createApp 函数是由 createAppAPI 函数返回的。那 createAPI 接收的参数有哪些呢？为了寻求答案，我们需要看一下 createAppAPI 做了什么事情。
packages/runtime-core/src/apiCreateApp.ts

  1. export function createAppAPI(render, hydrate){
  2.     // 渲染方法
  3.     return function createApp(rootComponent, rootProps = null) {
  5.       const context = createAppContext()
  6.       const installedPlugins = new Set()
  8.       let isMounted = false
  10.       const app =  {
  11.         mount(
  12.           rootContainer,
  13.           isHydrate,
  14.           isSVG
  15.         ) {
  16.             // 根据组建创建虚拟节点
  17.             const vnode = createVNode(
  18.               rootComponent,
  19.               rootProps
  20.             )
  21.             vnode.appContext = context
  22.             // 将虚拟节点和容器获取到后调用render方法渲染
  23.             render(vnode, rootContainer)
  24.         }
  25.     }
  26.     }
  28. }

createAppAPI 创建了createApp 方法，并根据传入的 根组件和根组件属性生成了 虚拟dom，并用传入的 render 方法渲染虚拟dom。

重写app.mount 方法

  1. // packages/runtime-dom/src/index.ts
  2. const { mount } = app
  3. app.mount = (containerOrSelector): any => {
  4.   // 1. 标准化容器（将传入的 DOM 对象或者节点选择器统一为 DOM 对象）
  5.   const container = normalizeContainer(containerOrSelector)
  6.   if (!container) return
  8.   const component = app._component
  9.   // 2. 标准化组件（如果根组件不是函数，并且没有 render 函数和 template 模板，则把根组件 innerHTML 作为 template）
  10.   if (!isFunction(component) && !component.render && !component.template) {
  11.     component.template = container.innerHTML
  12.   }
  14.   // 3. 挂载前清空容器的内容
  15.   container.innerHTML = ''
  17.   // 4. 执行渲染器创建 app 对象时定义的 mount 方法（在后文中称之为「标准 mount 函数」）来渲染根组件
  18.   const proxy = mount(container)
  20.   return proxy
  21. }

浏览器平台 app.mount 方法重写主要做了 4 件事情：

  1. 标准化容器
  2. 标准化组件
  3. 挂载前清空容器的内容
  4. 执行标准 mount 函数渲染组件

此时可能会有人思考一个问题：为什么要重写app.mount 呢？答案是因为 Vue.js 需要支持跨平台渲染。
支持跨平台渲染的思路：不同的平台具有不同的渲染器，不同的渲染器中会调用标准的 baseCreateRenderer 来保证核心（标准）的渲染流程是一致的。

以浏览器端和服务端渲染的代码实现为例：
yuque_diagram.jpg

标准 mount 方法

  1. // packages/runtime-core/src/apiCreateApp.ts
  2. // createAppAPI 函数内部返回的 createApp 函数中定义了 app 对象，mount 函数是 app 对象的方法之一
  3. mount(rootContainer, isHydrate) {
  4.   // 1. 创建根组件的 vnode
  5.   const vnode = createVNode(rootComponent, rootProps)
  6.   // 2. 利用函数参数传入的渲染器渲染 vnode
  7.   render(vnode, rootContainer)
  9.   app._container = rootContainer
  11.   return vnode.component.proxy
  12. },

1.创建 vnode

packages/runtime-core/src/vnode.ts

  1. function _createVNode(
  2.     type,
  3.     props = null,
  4.     children = null,
  5.     patchFlag = 0,
  6.     dynamicProps = null,
  7.     isBlockNode = false
  8.   ) {
  10.     // 根据type 来区分是组件还是普通元素
  11.     // 将 vnode 类型信息编码为位图
  12.     const shapeFlag = isString(type)
  13.       ? ShapeFlags.ELEMENT  // 是个字符串 就认为他是个元素
  14.       : __FEATURE_SUSPENSE__ && isSuspense(type)
  15.         ? ShapeFlags.SUSPENSE
  16.         : isTeleport(type)
  17.           ? ShapeFlags.TELEPORT
  18.           : isObject(type)  // 是对象就是个组件
  19.             ? ShapeFlags.STATEFUL_COMPONENT  // 带有状态的组件
  20.             : isFunction(type) // 是函数就是函数式组件
  21.               ? ShapeFlags.FUNCTIONAL_COMPONENT
  22.               : 0 // 其他情况就啥也不是
  24.     // 一个对象描述对应的内容，虚拟节点有跨平台的能力
  25.     const vnode = {
  26.       __v_isVNode: true, // 他是一个 vnode 节点
  27.       __v_skip: true,
  28.       type,
  29.       props,
  30.       key: props && normalizeKey(props),  // diff 算法会用到 key
  31.       ref: props && normalizeRef(props),
  32.       scopeId: currentScopeId,
  33.       slotScopeIds: null,
  34.       children: null,  // 虚拟节点的儿子 ，有三种情况，是个插槽、文本、数组
  35.       component: null, // 存放组件对应实例
  36.       suspense: null,
  37.       ssContent: null,
  38.       ssFallback: null,
  39.       dirs: null,
  40.       transition: null,
  41.       el: null, // 后面会将虚拟节点和真实节点对应起来
  42.       anchor: null,
  43.       target: null,
  44.       targetAnchor: null,
  45.       staticCount: 0,
  46.       shapeFlag, // 描述自己的类型
  47.       patchFlag,
  48.       dynamicProps,
  49.       dynamicChildren: null,
  50.       appContext: null
  51.     }
  53.     // 标准化儿子
  54.     normalizeChildren(vnode, children)
  56.     return vnode
  57. }
  59. export function normalizeChildren(vnode, children) {
  60.     let type = 0
  61.     const { shapeFlag } = vnode
  62.     // 如果儿子没有 不处理
  63.     if (children == null) {
  64.       children = null
  65.     } else if (isArray(children)) { // 儿子是数组
  66.       type = ShapeFlags.ARRAY_CHILDREN // 更新类型
  67.     }else {
  68.       type = ShapeFlags.TEXT_CHILDREN
  69.     }
  70.     vnode.children = children
  72.     vnode.shapeFlag |= type  // 标识出自己的类型和儿子的类型
  73. }

createVNode 做了 4 件事：

  1. 对 VNodeTypes 或 ClassComponent 类型的 type 进行各种标准化处理
  2. 将 vnode 类型信息编码为位图
  3. 创建 vnode 对象
  4. 标准化子节点 children

创建好vnode 之后就是 渲染 vnode 了

2.render 渲染 vnode

渲染 vnode 就是用 渲染器返回的 render 方法进行的。将一个虚拟节点挂载到真实 dom 上

  1. return {
  2.   render,
  3.   hydrate,
  4.   createApp: createAppAPI(render, hydrate)
  5. }
  1. // 根据不同的 虚拟dom 节点 创建对应的真实元素
  2. const render = (vnode, container) => {
  3.     if (vnode == null) {
  4.       // 如果 vnode 为 null，但是容器中有 vnode，则销毁组件
  5.       if (container._vnode) {
  6.         unmount(container._vnode, null, null, true)
  7.       }
  8.     } else {
  9.       // 创建或更新组件 初次渲染 老的 vnode 没有
  10.       patch(container._vnode || null, vnode, container)
  11.     }
  13.     // packages/runtime-core/src/scheduler.ts
  14.     flushPostFlushCbs()
  16.     // 缓存 vnode 节点（标识该 vnode 已经完成渲染）
  17.     container._vnode = vnode
  18.   }

render 做的事情是：如果传入的 vnode 为空，则销毁组件，否则就创建或者更新组件。

patch

核心是判断虚拟节点的类型，然后根据不同的类型 处理，渲染组件、渲染元素、渲染文本等

  1. const patch = (
  2.     n1, // 老的虚拟节点
  3.     n2, // 新的虚拟节点
  4.     container,
  5.     anchor = null,
  6.     parentComponent = null,
  7.     parentSuspense = null,
  8.     isSVG = false,
  9.     slotScopeIds = null,
  10.     optimized = false
  11.   ) => {
  12.     // 1. 如果是更新 vnode 并且新旧 vnode 类型不一致，则销毁旧的 vnode
  13.     if (n1 && !isSameVNodeType(n1, n2)) {
  14.       anchor = getNextHostNode(n1)
  15.       unmount(n1, parentComponent, parentSuspense, true)
  16.       n1 = null
  17.     }
  19.     const { type, ref, shapeFlag } = n2
  20.    //  2. 处理不同类型节点的渲染
  21.     switch (type) {
  22.       case Text:
  23.         processText(n1, n2, container, anchor)
  24.         break
  25.       case Comment:
  26.         processCommentNode(n1, n2, container, anchor)
  27.         break
  28.       case Static:
  29.         if (n1 == null) {
  30.           mountStaticNode(n2, container, anchor, isSVG)
  31.         } else if (__DEV__) {
  32.           patchStaticNode(n1, n2, container, isSVG)
  33.         }
  34.         break
  35.       case Fragment:
  36.         processFragment(
  37.           n1,
  38.           n2,
  39.           container,
  40.           anchor,
  41.           parentComponent,
  42.           parentSuspense,
  43.           isSVG,
  44.           slotScopeIds,
  45.           optimized
  46.         )
  47.         break
  48.       default:
  49.         // 元素
  50.         if (shapeFlag & ShapeFlags.ELEMENT) {
  51.           processElement(
  52.             n1,
  53.             n2,
  54.             container,
  55.             anchor,
  56.             parentComponent,
  57.             parentSuspense,
  58.             isSVG,
  59.             slotScopeIds,
  60.             optimized
  61.           )
  62.         } else if (shapeFlag & ShapeFlags.COMPONENT) { // 组件
  63.           processComponent( // 处理组件
  64.             n1,
  65.             n2,
  66.             container,
  67.             anchor,
  68.             parentComponent,
  69.             parentSuspense,
  70.             isSVG,
  71.             slotScopeIds,
  72.             optimized
  73.           )
  74.         }
  75.     }
  76.   }

patch 函数做了 2 件事情：

  1. 如果是更新 vnode 并且新旧 vnode 类型不一致，则销毁旧的 vnode
  2. 处理不同类型节点的渲染

在 patch 函数的多个参数中，我们优先关注前 3 个参数：

  1. n1 表示旧的 vnode，当 n1 为 null 的时候，表示是一次新建（挂载）的过程
  2. n2 表示新的 vnode 节点，后续会根据这个 vnode 类型执行不同的处理逻辑
  3. container 表示 DOM 容器，也就是 vnode 渲染生成 DOM 后，会挂载到 container 下面

1.处理组件的渲染

processComponent

  1. // packages/runtime-core/src/renderer.ts
  2. const processComponent = (
  3.     n1: VNode | null,
  4.     n2: VNode,
  5.     container: RendererElement,
  6.     anchor: RendererNode | null,
  7.     parentComponent: ComponentInternalInstance | null,
  8.     parentSuspense: SuspenseBoundary | null,
  9.     isSVG: boolean,
  10.     slotScopeIds: string[] | null,
  11.     optimized: boolean
  12.   ) => {
  13.     n2.slotScopeIds = slotScopeIds
  14.     if (n1 == null) { // 组件没有上一次的虚拟节点就是 初始化流程
  15.       if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
  16.         ;(parentComponent!.ctx as KeepAliveContext).activate(
  17.           n2,
  18.           container,
  19.           anchor,
  20.           isSVG,
  21.           optimized
  22.         )
  23.       } else { // 组件更新流程
  24.         mountComponent( // 挂载组件
  25.           n2,
  26.           container,
  27.           anchor,
  28.           parentComponent,
  29.           parentSuspense,
  30.           isSVG,
  31.           optimized
  32.         )
  33.       }
  34.     } else {
  35.       updateComponent(n1, n2, optimized)
  36.     }
  37.   }

核心 mountComponent

  1. // packages/runtime-core/src/renderer.ts
  2. /**
  3.     * let { createApp } = VueRuntimeDOM;
  4.         let App = {
  5.             setup(props,context){
  6.                 return 
  7.             },
  8.             render(proxy) {
  9.                 console.log('render');
  10.             }
  11.         }
  12.         let app = createApp(App, { name: 'hh', age: 12 })
  13.         app.mount('#app')
  14.    * 挂载组件 最核心的就是 调用 setup 拿到返回值（如果有 setup），或者获取render 函数返回的结果来进行渲染
  15.    * 1.创建组件实例
  16.    * 2.将需要的数据解析到实例上
  17.    * 3.创建一个 effect 让render 函数执行
  18.    */
  19.     const mountComponent = (
  20.         initialVNode,
  21.         container,
  22.         anchor,
  23.         parentComponent,
  24.         parentSuspense,
  25.         isSVG,
  26.         optimized
  27.       ) => {
  28.         // 2.x compat may pre-creaate the component instance before actually
  29.         // mounting
  30.         const compatMountInstance =
  31.           __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
  32.           // 1.根据vnode创建一个组件实例挂载到当前vnode 的component 属性上
  33.         const instance =
  34.           compatMountInstance ||
  35.           (initialVNode.component = createComponentInstance(
  36.             initialVNode,
  37.             parentComponent,
  38.             parentSuspense
  39.           ))
  40.         //   2.需要的数据解析到实例上
  41.         setupComponent(instance)
  43.         // 3.创建一个 effect 让 render 函数执行
  44.         setupRenderEffect(
  45.           instance,
  46.           initialVNode,
  47.           container,
  48.           anchor,
  49.           parentSuspense,
  50.           isSVG,
  51.           optimized
  52.         )
  53.       }

做了三件事：

  • 1.创建组件实例
  • 2.将需要的数据解析到实例上
  • 3.创建一个 effect 让 render 函数执行，当属性更新了组件会重新渲染
  • 4.拿到render方法返回的结果（即 h 函数的返回结果，也是一个 vnode），再次走渲染流程（调用patch）

1.创建组件实例
1.createComponentInstance

  1. // packages/runtime-core/src/components.ts
  2. export function createComponentInstance(
  3.     vnode,
  4.     parent,
  5.     suspense
  6.   ) {
  7.     const type = vnode.type
  8.     // inherit parent app context - or - if root, adopt from root vnode
  9.     const appContext =
  10.       (parent ? parent.appContext : vnode.appContext) || emptyAppContext
  12.       // 组件实例
  13.     const instance = {
  14.       uid: uid++,
  15.       vnode,
  16.       type,
  17.       parent,
  18.       appContext,
  19.       root, // to be immediately set
  20.       next: null,
  21.       subTree, // will be set synchronously right after creation
  22.       update, // will be set synchronously right after creation
  23.       render: null,
  24.       proxy: null,
  25.       exposed: null,
  26.       exposeProxy: null,
  27.       withProxy: null,
  28.       effects: null,
  29.       provides: parent ? parent.provides : Object.create(appContext.provides),
  30.       accessCache,
  31.       renderCache: [],
  33.       // local resovled assets
  34.       components: null,
  35.       directives: null,
  37.       // resolved props and emits options
  38.       propsOptions: normalizePropsOptions(type, appContext),
  39.       emitsOptions: normalizeEmitsOptions(type, appContext),
  41.       // emit
  42.       emit: null, // to be set immediately
  43.       emitted: null,
  45.       // props default value
  46.       propsDefaults: EMPTY_OBJ,
  48.       // inheritAttrs
  49.       inheritAttrs: type.inheritAttrs,
  51.       // state
  52.       ctx: EMPTY_OBJ,  // 组件上下文
  53.       data: EMPTY_OBJ,
  54.       props: EMPTY_OBJ,
  55.       attrs: EMPTY_OBJ,
  56.       slots: EMPTY_OBJ,
  57.       refs: EMPTY_OBJ,
  58.       setupState: EMPTY_OBJ, // setup 的返回值
  59.       setupContext: null,  
  61.       // suspense related
  62.       suspense,
  63.       suspenseId: suspense ? suspense.pendingId : 0,
  64.       asyncDep: null,
  65.       asyncResolved: false,
  67.       // lifecycle hooks
  68.       // not using enums here because it results in computed properties
  69.       isMounted: false, // 组件是否挂载过
  70.       isUnmounted: false,
  71.       isDeactivated: false,
  72.       bc: null,
  73.       c: null,
  74.       bm: null,
  75.       m: null,
  76.       bu: null,
  77.       u: null,
  78.       um: null,
  79.       bum: null,
  80.       da: null,
  81.       a: null,
  82.       rtg: null,
  83.       rtc: null,
  84.       ec: null,
  85.       sp: null
  86.     }
  87.     instance.ctx = { _: instance }  // 将instance放到了上下文里
  89.     instance.root = parent ? parent.root : instance
  90.     instance.emit = emit.bind(null, instance)
  92.     return instance
  93. }

将 instance 赋值给他的 ctx 属性，之后访问的时候通过 instance.ctx._， 而不用通过 instance.data 、instance.props ….
2.setupComponent将需要的数据解析到实例上

  1. // packages/runtime-core/src/components.ts
  2. export function setupComponent(
  3.     instance,
  4.     isSSR = false
  5.   ) {
  6.     isInSSRComponentSetup = isSSR
  8.     const { props, children } = instance.vnode // 拿出虚拟节点的 props、children
  9.     // 当前组件是不是有状态的组件，函数组件
  10.     const isStateful = instance.vnode.shapeFlag & ShapeFlags.STATEFUL_COMPONENT  
  11.     // 根据props 解析出 props 和 attrs，将其放到 instance 上
  12.     initProps(instance, props, isStateful, isSSR) // instance.props = props
  13.     initSlots(instance, children)    // 插槽的解析 instance.children = children
  15.     // 获取 setup 的返回值 调用当前实例的setup方法，用setup的返回值填充setupState 和对应的render方法
  16.     const setupResult = isStateful
  17.       ? setupStatefulComponent(instance, isSSR) 
  18.       : undefined
  19.     isInSSRComponentSetup = false
  20.     return setupResult
  21. }

setupStatefulComponent

  1. // packages/runtime-core/src/components.ts
  2. // 调用setup
  3. function setupStatefulComponent(
  4.     instance,
  5.     isSSR
  6.   ) {
  7.     // 拿到组件
  8.     const Component = instance.type 
  9.     instance.accessCache = Object.create(null)
  10.     // 1. 1.代理 传递给 render 函数的参数 代理了之后就不用通过 instance.props, instance.data,intance.attrs这样访问了
  12.     instance.proxy = markRaw(new Proxy(instance.ctx, PublicInstanceProxyHandlers))
  14.     // 2. 拿到组件的 setup方法
  15.     const { setup } = Component
  16.     if (setup) {
  17.         // 创建 setup 的上下文参数 setup(instance.props, setupContext)
  18.       const setupContext = (instance.setupContext =
  19.         setup.length > 1 ? createSetupContext(instance) : null) 
  21.       currentInstance = instance
  22.       // 执行setup
  23.       const setupResult =  setup(instance.props, setupContext)
  25.       handleSetupResult(setupResult)
  27.       // 开发时会使用这些属性
  28.       Component.render(instance.proxy)
  29.     }else { // 没有setup 调用finishComponentSetup
  30.       finishComponentSetup(instance, isSSR)
  31.     }
  32. }
  33. // 创建开发时需要用到的 props 和 context
  34. function createSetupContext(instance) {
  35.     const expose = exposed => {
  36.       instance.exposed = exposed || {}
  37.     }
  38.     // 开发时使用的四个参数 setup(props, context)
  39.     return { 
  40.         attrs: instance.attrs,
  41.         slots: instance.slots,
  42.         emit: instance.emit,
  43.         expose
  44.     }
  45. }

setupStatefulComponent 做了三件事：

  • 代理 传递给 render 函数的参数
  • 拿到组件的 setup方法，创建 setup 的上下文参数 setup(instance.props, setupContext)
  • 如果 setup 存在就执行setup，如果setup 不存在就调用 组件的 render 方法

1.代理

  1. // packages/runtime-core/src/components.ts
  2. export const PublicInstanceProxyHandlers = {
  3.     get({ _: instance }, key) {
  4.       const {
  5.         ctx,
  6.         setupState,
  7.         data,
  8.         props,
  9.         accessCache,
  10.         type,
  11.         appContext
  12.       } = instance
  14.       if (
  15.         hasOwn(setupState, key)
  16.       ) {
  17.         return setupState[key]
  18.       }else if (hasOwn(setupState, key)) {
  19.           return setupState[key]
  20.       } else if (hasOwn(data, key)) {
  21.           return data[key]
  22.       }
  23.     },
  25.     set({ _: instance },key,value) {
  26.       const { data, setupState, ctx } = instance
  27.       if (hasOwn(setupState, key)) {
  28.         setupState[key] = value
  29.       } else if (hasOwn(data, key)) {
  30.         data[key] = value
  31.       } else if (hasOwn(instance.props, key)) {
  32.         __DEV__ &&
  33.           warn(
  34.             `Attempting to mutate prop "${key}". Props are readonly.`,
  35.             instance
  36.           )
  37.         return false
  38.       }
  39.       if (key[0] === '$' && key.slice(1) in instance) {
  40.         __DEV__ &&
  41.           warn(
  42.             `Attempting to mutate public property "${key}". ` +
  43.               `Properties starting with $ are reserved and readonly.`,
  44.             instance
  45.           )
  46.         return false
  47.       } else {
  48.         if (__DEV__ && key in instance.appContext.config.globalProperties) {
  49.           Object.defineProperty(ctx, key, {
  50.             enumerable: true,
  51.             configurable: true,
  52.             value
  53.           })
  54.         } else {
  55.           ctx[key] = value
  56.         }
  57.       }
  58.       return true
  59.     }
  60. }

取值的时候走 get，赋值的时候走set

  1. props:{a: 1}
  2. data: {c: 3}
  3. setupState: {b: 2}
  6. let { createApp } = VueRuntimeDOM;
  7. let App = {
  8.   setup(props,context){
  9.     return 
  10.   },
  11.   render(proxy) {
  12.     console.log(proxy.a, proxy.b, proxy.c); // 1, 2, 3
  13.   }
  14. }

2.创建 setup 的上下文参数

  1. // packages/runtime-core/src/components.ts
  2. export function createSetupContext(instance) {
  3.     const expose = exposed => {
  4.       instance.exposed = exposed || {}
  5.     }
  6.     return { // 开发时使用的四个参数
  7.         attrs: instance.attrs,
  8.         slots: instance.slots,
  9.         emit: instance.emit,
  10.         expose
  11.     }
  12. }

这几个参数是开发时会用到的参数 setup(props, context)

3.如果没有setup就调用finishComponentSetup获取render 函数。

  1. // packages/runtime-core/src/components.ts
  2. export function finishComponentSetup(
  3.     instance,
  4.     isSSR,
  5.     skipOptions
  6.   ) {
  7.     const Component = instance.type
  9.     // template / render function normalization
  10.     if (__NODE_JS__ && isSSR) {
  11.       instance.render = (instance.render ||
  12.         Component.render ||
  13.         NOOP)
  14.     } else if (!instance.render) { // 如果没 render 就编译 template
  15.       // could be set from setup()
  16.       if (compile && !Component.render) { 
  17.         const template =
  18.           (__COMPAT__ &&
  19.             instance.vnode.props &&
  20.             instance.vnode.props['inline-template']) ||
  21.           Component.template
  22.         if (template) {
  23.           if (__DEV__) {
  24.             startMeasure(instance, `compile`)
  25.           }
  26.           const { isCustomElement, compilerOptions } = instance.appContext.config
  27.           const {
  28.             delimiters,
  29.             compilerOptions: componentCompilerOptions
  30.           } = Component
  31.           const finalCompilerOptions = extend(
  32.             extend(
  33.               {
  34.                 isCustomElement,
  35.                 delimiters
  36.               },
  37.               compilerOptions
  38.             ),
  39.             componentCompilerOptions
  40.           )
  41.           if (__COMPAT__) {
  42.             // pass runtime compat config into the compiler
  43.             finalCompilerOptions.compatConfig = Object.create(globalCompatConfig)
  44.             if (Component.compatConfig) {
  45.               extend(finalCompilerOptions.compatConfig, Component.compatConfig)
  46.             }
  47.           }
  48.           Component.render = compile(template, finalCompilerOptions)
  49.           if (__DEV__) {
  50.             endMeasure(instance, `compile`)
  51.           }
  52.         }
  53.       }
  55.       // 将生成的 render 函数 挂载到实例上
  56.       instance.render = (Component.render || NOOP) 
  57.     }
  58. }

这个方法会取组件上的 render 函数，如果没有render就对 template 模板进行编译，生成 render 函数，然后放在实例上
4.如果有 setup 就处理setup 的返回值

  1. // packages/runtime-core/src/components.ts
  2. export function handleSetupResult(
  3.     instance,
  4.     setupResult,
  5.     isSSR
  6.   ) {
  7.     if (isFunction(setupResult)) { // 如果结果是函数，就作为组件的 render 
  8.       if (__NODE_JS__ && (instance.type).__ssrInlineRender) {
  9.         instance.ssrRender = setupResult
  10.       } else {
  11.         instance.render = setupResult
  12.       }
  13.     } else if (isObject(setupResult)) { // 如果是对象 就赋值给 setupState
  14.       instance.setupState = setupResult
  15.     }
  16.     finishComponentSetup(instance, isSSR)
  17. }

如果setup 的返回值是一个 函数就直接作为组件的 render ，如果是对象就赋值给实例的 setupState，

如果既有 render 函数，setup又返回了 函数就会优先使用 返回值作为 render 函数。

  1. let { createApp } = VueRuntimeDOM;
  2. let App = {
  3.   setup(props,context){
  4.     return (proxy) => {
  5.       console.log('setup render')
  6.     }
  7.   },
  8.   render(proxy) {
  9.     console.log(proxy.a, proxy.b, proxy.c);
  10.     console.log('component render')
  11.   }
  12. }
  1. let { createApp } = VueRuntimeDOM;
  2. let App = {
  3.   setup(props,context){
  4.     // return (proxy) => {
  5.     //     console.log('setup render')
  6.     // }
  7.     return { 
  8.       a: 1,
  9.       b: 2,
  10.     }
  11.   },
  12.   render(proxy) {
  13.     console.log(proxy.a, proxy.b, proxy.c);
  14.     console.log('component render')
  15.   }
  16. }

image.png
3.创建一个 effect 让 render 执行 (组件的渲染流程)
因为是组件，所以在 render 执行的时候会创建组件的子树 vnode，然后递归调用patch渲染。

  1.  setup(props,context){
  2.    return (proxy) => {
  3.         return h('div', {}, 'hello world')
  4.    }
  5. }
  1. // packages/runtime-core/src/redenerer.ts
  2. // 创建一个 effect 让 render 执行
  3.       const setupRenderEffect = (
  4.         instance,
  5.         initialVNode,
  6.         container,
  7.         anchor,
  8.         parentSuspense,
  9.         isSVG,
  10.         optimized
  11.       ) => {
  12.         // create reactive effect for rendering
  13.         instance.update = effect(function componentEffect() {
  14.             // 没有被挂载就是初次渲染
  15.           if (!instance.isMounted) {
  17.             let proxyToUse = instance.proxy;
  18.             // 执行render 他的返回值是 h 函数的执行结果， 就是组件的渲染内容
  19.             /**
  20.              * setup(props,context){
  21.              * return (proxy) => {
  22.              *    return h('div', {}, 'hello world')
  23.              * }
  24.              * }
  25.              */
  26.             let subTree = instance.subTree = instance.render.call(proxyToUse,proxyToUse); 
  27.             // 用render 函数的返回值 继续渲染子树
  28.             patch(
  29.                 null,
  30.                 subTree,
  31.                 container,
  32.                 anchor,
  33.                 instance,
  34.                 parentSuspense,
  35.                 isSVG
  36.               )
  37.             instance.isMounted = true
  38.       }

执行render 的时候会返回h 函数的执行结果，这个结果就是组件要渲染内容的vnode，最后调用 patch 函数将这个 vnode渲染到页面。这时渲染走的是元素的渲染逻辑。

  1. /**
  2.  * h('div', {a: 1}) 有属性没儿子
  3.  * h('div', {}, 'children') // 儿子是字符串
  4.  * h('div',{}, h('span')) // 儿子是个对象
  5.  * h('div', h('span')) 不写属性
  6.  * h('div', [h('span'), h('span')])
  7.  * h('div', null, h('span'), h('span'))
  8.  * h('div', null, 'a', 'b', 'c')
  9.  * @param type 
  10.  * @param propsOrChildren 
  11.  * @param children 
  12.  * @returns 
  13.  */
  14.  export function h(type, propsOrChildren, children) {
  15.     const l = arguments.length
  16.     if (l === 2) {  // 类型+ 属性 或者 类型+children
  17.       if (isObject(propsOrChildren) && !isArray(propsOrChildren)) {
  18.         // single vnode without props
  19.         if (isVNode(propsOrChildren)) {
  20.           return createVNode(type, null, [propsOrChildren]) // 孩子
  21.         }
  22.         // props without children
  23.         return createVNode(type, propsOrChildren) // 属性
  24.       } else {
  25.         // omit props 如果第二个参数不是对象一定是孩子
  26.         return createVNode(type, null, propsOrChildren)
  27.       }
  28.     } else {
  29.       if (l > 3) { 
  30.         // 除了前两个 后面都是孩子
  31.         children = Array.prototype.slice.call(arguments, 2)
  32.       } else if (l === 3 && isVNode(children)) { 
  33.         children = [children]
  34.       }
  35.       return createVNode(type, propsOrChildren, children)
  36.     }
  37.   }

h 函数可能的写法有好几种，都考虑到了，最终都是通过 createVNode 生成 虚拟节点。
4.拿到render方法返回的结果（即 h 函数的返回结果，也是一个 vnode），再次走渲染流程（调用patch）
看下面。

2.处理元素的渲染

上面组件的渲染处理完就该处理组件下面的元素了。

  1. // 处理元素的渲染
  2.       const processElement = (
  3.         n1,
  4.         n2,
  5.         container,
  6.         anchor,
  7.         parentComponent,
  8.         parentSuspense,
  9.         isSVG,
  10.         slotScopeIds,
  11.         optimized
  12.       ) => {
  13.         isSVG = isSVG || (n2.type) === 'svg'
  14.         // 初次渲染
  15.         if (n1 == null) {
  16.           mountElement(
  17.             n2,
  18.             container,
  19.             anchor,
  20.             parentComponent,
  21.             parentSuspense,
  22.             isSVG,
  23.             slotScopeIds,
  24.             optimized
  25.           )
  26.         } else {
  27.             // 更新
  28.       }

初次渲染

  1. // 渲染元素是递归渲染 先渲染最外层的 div 在渲染它下面的 孩子 
  2.       const mountElement = (
  3.         vnode,
  4.         container,
  5.         anchor,
  6.         parentComponent,
  7.         parentSuspense,
  8.         isSVG,
  9.         slotScopeIds,
  10.         optimized
  11.       ) => {
  12.         let el
  13.         let vnodeHook
  14.         const { type, props, shapeFlag, transition, patchFlag, dirs } = vnode
  15.         if (
  16.           !__DEV__ &&
  17.           vnode.el &&
  18.           hostCloneNode !== undefined &&
  19.           patchFlag === PatchFlags.HOISTED
  20.         ) {
  21.           el = vnode.el = hostCloneNode(vnode.el) 
  22.         } else {
  23.             // 创建真实 dom 并赋值给 vnode.el
  24.           el = vnode.el = hostCreateElement(
  25.             vnode.type,
  26.             isSVG,
  27.             props && props.is,
  28.             props
  29.           )
  30.           // 判断有儿子的类型 是文本类型
  31.           if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
  32.             hostSetElementText(el, vnode.children)
  33.           } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
  34.               // 如果是数组 h('div',{}, ['hello', 'leah']) 不能直接插入，插入会覆盖，需要转换成 vnode 再循环调用patch插入到页面
  35.             mountChildren(
  36.               vnode.children,
  37.               el, // 挂载容器
  38.               null,
  39.               parentComponent,
  40.               parentSuspense,
  41.               isSVG && type !== 'foreignObject',
  42.               slotScopeIds,
  43.               optimized || !!vnode.dynamicChildren
  44.             )
  45.           }
  46.           // props 如果有属性就处理属性 {style:{color: 'red'}}
  47.           if (props) {
  48.             for (const key in props) {
  49.               if (!isReservedProp(key)) {
  50.                 hostPatchProp(
  51.                   el,
  52.                   key,
  53.                   null,
  54.                   props[key],
  55.                   isSVG,
  56.                   vnode.children,
  57.                   parentComponent,
  58.                   parentSuspense,
  59.                   unmountChildren
  60.                 )
  61.               }
  62.             }
  63.           }
  64.         }
  65.         // 插入到容器中
  66.         hostInsert(el, container, anchor)
  67.       }

我们可以看到创建元素dom 的时候调用了 hostCreateElement ，设置文本节点调用了 hostSetElementText，还有设置属性的方法 hostPatchProp，这些方法是从 baseCreateRenderer 函数入参 options 中解析出来的方法：

  1. // packages/runtime-core/src/renderer.ts
  2. const {
  3.   insert: hostInsert,
  4.   remove: hostRemove,
  5.   patchProp: hostPatchProp,
  6.   forcePatchProp: hostForcePatchProp,
  7.   createElement: hostCreateElement,
  8.   createText: hostCreateText,
  9.   createComment: hostCreateComment,
  10.   setText: hostSetText,
  11.   setElementText: hostSetElementText,
  12.   parentNode: hostParentNode,
  13.   nextSibling: hostNextSibling,
  14.   setScopeId: hostSetScopeId = NOOP,
  15.   cloneNode: hostCloneNode,
  16.   insertStaticContent: hostInsertStaticContent
  17. } = options

上面的options对应如下：

  1. // packages/runtime-dom/src/nodeOps.ts
  2. export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
  3.   /**
  4.    * 元素插入
  5.    * @param child 要插入的元素
  6.    * @param parent 插到哪个里面去
  7.    * @param anchor 当前参照物 如果为空，则相当于 appendChild
  8.    */
  9.   insert: (child, parent, anchor) => {
  10.     parent.insertBefore(child, anchor || null)
  11.   },
  13.   /**
  14.    * 元素删除
  15.    * 通过儿子找到父亲删除
  16.    * @param child 
  17.    */
  18.   remove: child => {
  19.     const parent = child.parentNode
  20.     if (parent) {
  21.       parent.removeChild(child)
  22.     }
  23.   },
  25.   /**
  26.    * 元素增加
  27.    * 创建节点，不同平台创建元素的方式不同
  28.    * @param tag 
  29.    * @param isSVG 
  30.    * @param is 
  31.    * @param props 
  32.    * @returns 
  33.    */
  34.   createElement: (tag, isSVG, is, props): Element => {
  35.     const el = isSVG
  36.       ? doc.createElementNS(svgNS, tag)
  37.       : doc.createElement(tag, is ? { is } : undefined)
  39.     if (tag === 'select' && props && props.multiple != null) {
  40.       ;(el as HTMLSelectElement).setAttribute('multiple', props.multiple)
  41.     }
  43.     return el
  44.   },
  46.   /**
  47.    * 元素查找
  48.    * @param selector 
  49.    * @returns 
  50.    */
  51.    querySelector: selector => doc.querySelector(selector),
  53.    /**
  54.    * 给元素设置文本
  55.    * @param el 
  56.    * @param text 
  57.    */
  58.   setElementText: (el, text) => {
  59.     el.textContent = text
  60.   },
  62.   /**
  63.    * 文本操作
  64.    * 创建文本
  65.    * @param text 
  66.    * @returns 
  67.    */
  68.   createText: text => doc.createTextNode(text),
  70.   createComment: text => doc.createComment(text),
  72.   /**
  73.    * 给节点设置文本
  74.    * @param node 
  75.    * @param text 
  76.    */
  77.   setText: (node, text) => {
  78.     node.nodeValue = text
  79.   },
  81.   /**
  82.    * 获取父节点
  83.    * @param node 
  84.    * @returns 
  85.    */
  86.   parentNode: node => node.parentNode as Element | null,
  88.   nextSibling: node => node.nextSibling,
  92.   setScopeId(el, id) {
  93.     el.setAttribute(id, '')
  94.   },
  96.   cloneNode(el) {
  97.     const cloned = el.cloneNode(true)
  98.     // #3072
  99.     // - in `patchDOMProp`, we store the actual value in the `el._value` property.
  100.     // - normally, elements using `:value` bindings will not be hoisted, but if
  101.     //   the bound value is a constant, e.g. `:value="true"` - they do get
  102.     //   hoisted.
  103.     // - in production, hoisted nodes are cloned when subsequent inserts, but
  104.     //   cloneNode() does not copy the custom property we attached.
  105.     // - This may need to account for other custom DOM properties we attach to
  106.     //   elements in addition to `_value` in the future.
  107.     if (`_value` in el) {
  108.       ;(cloned as any)._value = (el as any)._value
  109.     }
  110.     return cloned
  111.   },
  113.   // __UNSAFE__
  114.   // Reason: insertAdjacentHTML.
  115.   // Static content here can only come from compiled templates.
  116.   // As long as the user only uses trusted templates, this is safe.
  117.   insertStaticContent(content, parent, anchor, isSVG, cached) {
  118.     if (cached) {
  119.       let [cachedFirst, cachedLast] = cached
  120.       let first, last
  121.       while (true) {
  122.         let node = cachedFirst.cloneNode(true)
  123.         if (!first) first = node
  124.         parent.insertBefore(node, anchor)
  125.         if (cachedFirst === cachedLast) {
  126.           last = node
  127.           break
  128.         }
  129.         cachedFirst = cachedFirst.nextSibling!
  130.       }
  131.       return [first, last] as any
  132.     }
  134.     // <parent> before | first ... last | anchor </parent>
  135.     const before = anchor ? anchor.previousSibling : parent.lastChild
  136.     if (anchor) {
  137.       let insertionPoint
  138.       let usingTempInsertionPoint = false
  139.       if (anchor instanceof Element) {
  140.         insertionPoint = anchor
  141.       } else {
  142.         // insertAdjacentHTML only works for elements but the anchor is not an
  143.         // element...
  144.         usingTempInsertionPoint = true
  145.         insertionPoint = isSVG
  146.           ? doc.createElementNS(svgNS, 'g')
  147.           : doc.createElement('div')
  148.         parent.insertBefore(insertionPoint, anchor)
  149.       }
  150.       insertionPoint.insertAdjacentHTML('beforebegin', content)
  151.       if (usingTempInsertionPoint) {
  152.         parent.removeChild(insertionPoint)
  153.       }
  154.     } else {
  155.       parent.insertAdjacentHTML('beforeend', content)
  156.     }
  157.     return [
  158.       // first
  159.       before ? before.nextSibling : parent.firstChild,
  160.       // last
  161.       anchor ? anchor.previousSibling : parent.lastChild
  162.     ]
  163.   }
  164. }
  165. packages/runtime-dom/src/patchProp.ts
  166. export const patchProp: DOMRendererOptions['patchProp'] = (
  167.   el, // 元素
  168.   key, // 属性
  169.   prevValue, // 前一个值
  170.   nextValue,
  171.   isSVG = false,
  172.   prevChildren,
  173.   parentComponent,
  174.   parentSuspense,
  175.   unmountChildren
  176. ) => {
  177.   switch (key) {
  178.     // special
  179.     case 'class':
  180.       patchClass(el, nextValue, isSVG) // 那最新的属性覆盖掉旧的
  181.       break
  182.     case 'style':   // {style:{color: 'red'}}  -> {style:{background: 'red'}} 删掉之前的
  183.       patchStyle(el, prevValue, nextValue)
  184.       break
  185.     default:
  186.       // 如果不是事件 才是属性
  187.       if (isOn(key)) { // 如果是 以 on 开头的就是事件，onClick，onChange 
  188.         // ignore v-model listeners
  189.         if (!isModelListener(key)) {
  190.           patchEvent(el, key, prevValue, nextValue, parentComponent)  // 添加、删除、修改
  191.         }
  192.       } else if (shouldSetAsProp(el, key, nextValue, isSVG)) {
  193.         patchDOMProp(
  194.           el,
  195.           key,
  196.           nextValue,
  197.           prevChildren,
  198.           parentComponent,
  199.           parentSuspense,
  200.           unmountChildren
  201.         )
  202.       } else {
  203.         // special case for <input v-model type="checkbox"> with
  204.         // :true-value & :false-value
  205.         // store value as dom properties since non-string values will be
  206.         // stringified.
  207.         if (key === 'true-value') {
  208.           ;(el as any)._trueValue = nextValue
  209.         } else if (key === 'false-value') {
  210.           ;(el as any)._falseValue = nextValue
  211.         }
  212.         patchAttr(el, key, nextValue, isSVG, parentComponent)
  213.       }
  214.       break
  215.   }
  216. }

可以看到这些方法就是最终调用 document 上的方法将 vnode 转换成 真实 DOM渲染到页面上的。

渲染元素是递归渲染 先渲染最外层的 div 在渲染它下面的 孩子.
通过 document.createElement 创建真实dom元素，并赋值给 vnode.el , 然后判断儿子的类型是不是文本，如果是文本 直接给元素设置文本 el.textContent = text ，如果是数组类型的文本，不能直接插入到页面，那样插入会覆盖，需要遍历将文本转换成 vnode 再调用patch插入到页面。代码如下：

  1. // 将文本创建成 虚拟节点
  2.       const mountChildren = (
  3.         children,
  4.         container,
  5.         anchor,
  6.         parentComponent,
  7.         parentSuspense,
  8.         isSVG,
  9.         slotScopeIds,
  10.         optimized,
  11.         start = 0
  12.       ) => {
  13.         for (let i = start; i < children.length; i++) {
  14.           const child = (children[i] = optimized
  15.             ? cloneIfMounted(children[i])
  16.             : normalizeVNode(children[i]))
  17.             // 渲染文本
  18.           patch(
  19.             null,
  20.             child,
  21.             container,
  22.             anchor,
  23.             parentComponent,
  24.             parentSuspense,
  25.             isSVG,
  26.             slotScopeIds,
  27.             optimized
  28.           )
  29.         }
  30.       }
  32.       // 将儿子转成 vnode 然后调用 patch渲染
  33.       export function normalizeVNode(child) {
  34.         if (child == null || typeof child === 'boolean') {
  35.           // empty placeholder
  36.           return createVNode(Comment)
  37.         } else if (isArray(child)) {
  38.           // fragment
  39.           return createVNode(
  40.             Fragment, // type
  41.             null, // props
  42.             child.slice() // children
  43.           )
  44.         } else if (typeof child === 'object') {
  45.             // 是 object 直接返回
  46.           return cloneIfMounted(child)
  47.         } else {
  48.           // 字符串 或者 numbers
  49.           return createVNode(Text, null, String(child)) 
  50.         }
  51.       }

文本转换成了vnode之后就需要将 文本类型的 vnode 插入到页面中，我们来看一下是如何处理文本节点的渲染

3.处理文本节点的渲染

以新建文本 DOM 节点为例，此时 n1 为 null，n2 类型为 Text，所以会走分支逻辑：processText(n1, n2, container, anchor)。processText 内部会去调用 hostCreateText 和 hostSetText。

  1. const processText: ProcessTextOrCommentFn = (n1, n2, container, anchor) => {
  2.     // 如果老的vnode 不存在就是第一次创建
  3.     if (n1 == null) {
  4.       hostInsert(
  5.         (n2.el = hostCreateText(n2.children as string)),
  6.         container,
  7.         anchor
  8.       )
  9.     } else {
  10.       const el = (n2.el = n1.el!)
  11.       if (n2.children !== n1.children) {
  12.         hostSetText(el, n2.children as string)
  13.       }
  14.     }
  15.   }

hostCreateText 和 hostSetText 也是从 baseCreateRenderer 函数入参 options 中解析出来的方法。
首先将文本节点转换成 dom元素，然后插入到页面中。

组件渲染流程图

组件渲染流程.png

image.png

首先处理组件的挂载，走 processComponent ,根据传入的参数，如果有 n1 就是组件更新，走 updateComponent，如果没有n1 就是组件初次渲染，走 mountComponent。
mountComponent 第一步创建组件实例instance，第二步给组件实例增添属性，第三步设置渲染副作用函数effect，这样当组件更新之后也能重新渲染，调用组件的render 方法，拿到 render 函数返回的子树虚拟节点subTree，继续走 patch 渲染子树。判断这个子树是元素还是组件，如果是元素就走 processElement，如果是组件就走 processComponent。