Vue3 源码笔记 02——运行轨迹

2023-11-12 00:13:14

叩响 Vue3 的大门

一切的开始，源自一个不起眼的函数——createApp。这个函数是 Vue3 的入口，也是我们与 Vue3 交互的起点。

import { createApp } from 'vue'

在 Vue3 的源码中，createApp 函数位于 vue/src/index.ts 文件中。它是整个 Vue3 库的核心，负责创建 Vue 实例并挂载到 DOM 上。

穿越 createApp 的迷雾

createApp 函数内部的逻辑并不复杂，但它却肩负着重大的使命。它首先会检查是否存在渲染器，如果没有，则会创建一个默认的渲染器。然后，它会创建一个 Vue 实例，并将其挂载到指定的元素上。

export function createApp(rootComponent: Component | ComponentOptions, rootProps?: Data): App<RootData> {
  return ensureRenderer().createApp(rootComponent, rootProps)
}

揭秘 ensureRenderer()

ensureRenderer() 函数负责检查是否存在渲染器，如果没有，则会创建一个默认的渲染器。这个默认的渲染器就是 runtime-dom，它负责将 Vue 实例渲染到 DOM 上。

function ensureRenderer(): Renderer<RootData> {
  return (renderer: Renderer<RootData>) => {
    if (!renderer) {
      renderer = createRenderer<RootData>({
        patchProp
      })
    }
    return renderer
  }
}

窥探 createRenderer()

createRenderer() 函数负责创建渲染器。它接收一个对象作为参数，这个对象包含了 patchProp 函数。patchProp 函数用于将虚拟 DOM 转换为真实 DOM。

function createRenderer<HostNode, HostElement>(options: RendererOptions<HostNode, HostElement>): Renderer<HostNode> {
  return baseCreateRenderer<HostNode, HostElement>(options)
}