Vue Vapor 应用初始化

一个有趣的对比：在 SolidJS 中，组件被视为代码组织方式，初始化后组件概念随即消失，因为其更新机制完全不依赖组件本身。而 Vue Vapor 则不同——它既要兼容 Vue3 的那套 API，又必须保留组件概念。

Vue3 应用初始化的核心逻辑

在 Vue3 应用初始化过程中，通常编写一个组件后调用：

 复制代码const app = createApp(App)
app.mount("#app")

createApp 背后的逻辑是将组件转换为虚拟 DOM，再由渲染器将其渲染到页面。要理解这个流程，需先了解渲染器的工作原理。

渲染器通过 createRenderer 函数创建，该函数是工厂函数，返回渲染器对象。其基本结构如下：

 复制代码// 创建渲染器
function createRenderer(options) {
    // 渲染函数，主要是把一个虚拟 DOM 渲染到某一个元素节点上
    function render(vnode, container) {
        // 具体通过 patch 函数进行渲染
        patch(null, vnode, container, null, null)
    }
    // 补丁函数
    function patch(n1, n2, container) {
		// 根据虚拟DOM 的类型不同进行不同的操作
    }
    // 返回渲染器对象
    return {
        createApp: createAppAPI(render)
    }
}

渲染器的职责是将虚拟 DOM 转化为真实 DOM——包括元素的创建、删除、修改，以及属性的增删改。由于不同平台对 DOM 操作的 API 不同，createRenderer 允许根据不同平台传入对应操作函数。

日常使用 Vue3 时，默认依赖 runtime-dom 包，它封装了浏览器平台的 DOM 操作 API：

 复制代码// 创建元素
function createElement(type) {
    return document.createElement(type)
}
// 插入元素
function insert(child, parent, anchor) {
    parent.insertBefore(child, anchor || null)
}
// 创建元素文本
function setElementText (el, text) {
    el.textContent = text
}
// 创建渲染器
const renderer = createRenderer({
    createElement,
    insert,
    setElementText
})
// 创建 Vue3 应用
export function createApp(...args) {
    return renderer.createApp(...args)
}

可见，创建渲染器时将 createElement、insert、setElementText 等原生 DOM 操作封装成函数作为参数传入，返回的渲染器专门针对浏览器平台。

我们平时写的 const app = createApp(App)，其 createApp 就是渲染器对象中的方法，它通过 createAppAPI 工厂函数创建。来看 createAppAPI 的具体实现：

 复制代码// 创建 Vue3 应用实例对象
function createAppAPI(render) {
    return function createApp(rootComponent) {
        // 创建 Vue3 应用实例对象
        const app = {
            // 实例挂载方法
            mount(rootContainer) {
                // 创建根组件虚拟DOM
                const vnode = createVNode(rootComponent)
                // 把根组件的虚拟DOM 渲染到 #app 节点上
                render(vnode, rootContainer)
            }
        }
        return app
    }
}

这段代码本质上是闭包：createAppAPI 缓存了不同渲染器中的 render 方法，然后返回 createApp 函数。我们调用的 createApp(App) 就是这个函数。返回的应用对象包含 mount 方法，挂载时先创建根组件的虚拟 DOM，再通过渲染器的 render 方法渲染到指定 DOM 节点（通常是 #app）。

在 Vue Vapor 中，情况则不同——由于没有虚拟 DOM，渲染器实例已不需要。但为了保持 API 兼容，Vue Vapor 的启动方式仍需与 Vue3 一致。

Vue Vapor 的应用初始化

为了让 Vue3 项目未来能平滑升级到 Vue Vapor，也需要支持 createApp(App).mount('#app') 这种调用方式。既然不再需要虚拟 DOM 和渲染器，直接从 createAppAPI 返回的 createApp 开始改造：

 复制代码function createApp(rootComponent) {
    // 创建 Vue Vapor 应用实例对象
    const app = {
        // 实例挂载方法
        mount(rootContainer) {
            // 把根组件的挂载到 #app 节点上
            render(rootComponent, rootContainer)
        }
    }
    return app
}

这样调用方式变成：

 复制代码const root = document.getElementById('app')
- render(App, root)
+ const app = createApp(App)
+ app.mount(root)

当然，为支持 app.mount('#app') 这种字符串参数，需添加获取根元素的函数，在 render 方法中处理：

 复制代码function normalizeContainer(container) {
  return typeof container === 'string'
     (document.querySelector(container))
    : container
}

接着修改 render 方法：

 复制代码function render(comp, container) {
    const render = typeof comp === 'function'  comp : comp.render
    const block = render()
-    insert(block, container)
+    insert(block, (container = normalizeContainer(container)))
}

这样，Vue Vapor 的应用初始化调用方式与 Vue3 完全一致：

 复制代码const app = createApp(App)
app.mount('#app')

Vue Vapor 组件初始化流程

如上所述，SolidJS 中组件仅是代码组织方式，初始化后即消失。但 Vue Vapor 因需兼容 Vue3 API，仍需保留组件“概念”。

首先创建组件实例对象，保存状态信息，如指令、是否已挂载、生命周期钩子等：

 复制代码export const createComponentInstance = (
  component
) => {
  const instance = {
    block: null,
    container: null, // set on mount
    component
    // TODO: registory of provides, appContext, lifecycles, ...
  }
  return instance
}

有了实例，需有挂载函数将其渲染到页面：

 复制代码function mountComponent(
  instance,
  container
) {
    instance.container = container
    const render = typeof instance.component === 'function'  instance.component : instance.component.render
    const block = render()
    insert(block, instance.container)
}

原来 render 函数的核心逻辑现在移至 mountComponent，render 函数相应调整：

 复制代码function render(comp, container) {
-    const render = typeof comp === 'function'  comp : comp.render
-    const block = render()
-    insert(block, (container = normalizeContainer(container)))
+    const instance = createComponentInstance(comp)
+    mountComponent(instance, (container = normalizeContainer(container)))
}

之前测试使用函数组件，但 Vue3 中更常见的是状态组件——例如 script setup 编译后的对象。示例：

 复制代码const App = {
    setup() {
        const count = ref(0)
        return { count } 
    },
    render(_ctx) {
        // 生成创建 button 标签的函数
        const _tmpl$ = template('')
        // 真正进行创建模板内容的地方
        const el = _tmpl$()
        el.addEventListener('click', () => {
            _ctx.count.value++
        })
        effect(() => {
            el.textContent = _ctx.count.value
        })
        return el
    }
}

实现此类状态组件的渲染，需先执行 setup 方法，将其结果作为参数传递给 render，再执行 render 获取最终 DOM。此逻辑在 mountComponent 中迭代即可：

 复制代码function mountComponent(
  instance,
  container
) {
  instance.container = container  const { component } = instance
  // 判断是状态组件还是函数组件
  const setupFn =
      typeof component === 'function'  component : component.setup
  // 获取 setup 方法的执行结果
  const state = setupFn && setupFn()
  // 执行 render 函数获取 DOM 结果
  const block = instance.block = component.setup  component.render(state) : state
  // 挂载组件DOM元素到到父级元素上
  insert(block, instance.container)
  // 设置已经挂载的标记
  instance.isMounted = true
  // TODO: lifecycle hooks (mounted, ...)
  // const { m } = instance
  // m && invoke(m)
}

测试表明，状态组件也能正常渲染。

代码组织结构调整优化

截至目前，包含测试代码在内不足一百行，已清晰阐述 Vue Vapor 运行时基本原理。去除了虚拟 DOM，整个运行时架构远比之前轻量——这也是无虚拟 DOM 性能更优的重要原因。无需 diff 算法和对比，性能开销大幅降低。

为便于后续开发，需对代码组织架构进行重构。

首先在根目录新建 runtime-vapor 目录，存放 Vue Vapor 运行时代码。结构如下：

 复制代码├── runtime-vapor
│   ├── src
│   │   ├── index.js        // Vapor 运行时程序入口文件
|   |   ├── apiCreateApp.js // 存放 createApp API 
|   |   ├── render.js       // 渲染相关的
|   |   ├── component.js    // 组件相关的
|   |   ├── template.js     // 生成原生模板的

apiCreateApp.js 文件内容：

 复制代码import { render } from "./render"
export function createApp(rootComponent) {
    // 创建 Vue3 应用实例对象
    const app = {
        // 实例挂载方法
        mount(rootContainer) {
            // 把根组件的挂载到 #app 节点上
            render(rootComponent, rootContainer)
        }
    }
    return app
}

render.js 文件内容：

 复制代码import { createComponentInstance } from './component'
export function render(comp, container) {
    const instance = createComponentInstance(comp)
    mountComponent(instance, (container = normalizeContainer(container)))
}function normalizeContainer(container) {
  return typeof container === 'string'
     (document.querySelector(container))
    : container
}function mountComponent(
  instance,
  container
) {
  instance.container = container  const { component } = instance
  // 判断是状态组件还是函数组件
  const setupFn =
      typeof component === 'function'  component : component.setup
  // 获取 setup 方法的执行结果
  const state = setupFn && setupFn()
  // 执行 render 函数获取 DOM 结果
  const block = instance.block = component.setup  component.render(state) : state
  // 挂载组件DOM元素到到父级元素上
  insert(block, instance.container)
  // 设置已经挂载的标记
  instance.isMounted = true
  // TODO: lifecycle hooks (mounted, ...)
  // const { m } = instance
  // m && invoke(m)
}function insert(block, parent, anchor = null) {
    parent.insertBefore(block, anchor)
}

component.js 文件内容：

 复制代码let uid = 0
export const createComponentInstance = (
  component
) => {
  const instance = {
    uid: uid++,
    block: null,
    container: null, // set on mount
    component,
    isMounted: false
    // TODO: registory of provides, appContext, lifecycles, ...
  }
  return instance
}

template.js 文件内容：

 复制代码export function template(html) {
    let node
    const create = () => {
        const t = document.createElement("template")
        t.innerHTML = html
        return t.content.firstChild
    }
    const fn = () => (node || (node = create())).cloneNode(true)
    return fn 
}

index.js 作为入口文件，导出所有公共 API：

 复制代码export { ref, effect } from '@vue/reactivity'
export { render } from './render'
export { template } from './template'
export { createApp } from './apiCreateApp'

接着将测试组件 App 放入 src/App.js：

 复制代码import { ref, template, effect } from "../runtime-vapor/src"
const App = {
    setup() {
        const count = ref(0)
        return { count } 
    },
    render(_ctx) {
        // 生成创建 button 标签的函数
        const _tmpl$ = template('')
        // 真正进行创建模板内容的地方
        const el = _tmpl$()
        el.addEventListener('click', () => {
            _ctx.count.value++
        })
        effect(() => {
            el.textContent = _ctx.count.value
        })
        return el
    }
}export default App

最后，src/main.js 可写成与传统 Vue3 应用完全一致的形式：

 复制代码import { createApp } from '../runtime-vapor/src'
import App from './App'const app = createApp(App)
app.mount('#app')

重构完成后的目录结构为：

 复制代码├── runtime-vapor
│   ├── src
│   │   ├── index.js        // Vapor 运行时程序入口文件
|   |   ├── apiCreateApp.js // 存放 createApp API 
|   |   ├── render.js       // 渲染相关的
|   |   ├── component.js    // 组件相关的
|   |   ├── template.js     // 生成原生模板的
├── src
│   ├── App.js    // 测试组件
│   └── main.js   // 应用入口文件
├── index.html
└── package.json

总结

本文从 Vue3 的渲染器和虚拟 DOM 出发，对比分析了 Vue Vapor 在应用初始化上的设计思路。

Vue Vapor 直接移除了虚拟 DOM 和渲染器层，将组件编译为原生 DOM 操作。因此 createApp 不再依赖 createRenderer，而是直接创建应用实例，通过 render 完成挂载。引入组件实例对象（createComponentInstance）和挂载函数（mountComponent）后，Vue Vapor 在兼容 Vue3 组件 API（如 setup、render）的同时，大幅简化了运行时代码结构。

去除 diff 算法和 patch 流程后，整体架构更加轻量，性能开销显著降低。代码组织上将运行时拆分为 apiCreateApp、render、component、template 等独立模块，职责清晰，便于后续扩展与维护。

这种设计既保证了 Vue3 项目未来可平滑升级，也为无虚拟 DOM 的高性能渲染奠定了基础，堪称 Vue 技术栈在编译时优化方向上迈出的重要一步。