Vue源码解析-01：从创建到挂载的完整流程

在前端技术发展中，Vue.js 凭借其轻量级结构与强大的功能，受到了众多开发者的青睐。当我们执行 createApp(App).mount('#app') 这行看似简单的代码时，Vue 内部究竟经历了怎样复杂的处理流程？它如何从一个简单的JavaScript对象，逐步转换为浏览器中可交互的界面？本文将深入分析Vue源码，详细解析从应用创建、组件挂载到虚拟DOM渲染的完整过程。通过这次技术探索，我们将提升对框架的理解，更好地掌握Vue的设计理念。

第一部分：应用初始化 - `createApp` 的核心设计

每一个Vue应用的生命，都始于 createApp 这个看似简单的API。然而，简约之下，却隐藏着Vue 3架构设计中的核心考量------应用实例的隔离性 。告别了Vue 2时代"一个萝卜一个坑"的全局Vue构造函数，Vue 3的 createApp 为我们开启了多实例并存的新纪元。这背后，究竟有何玄机？

1.1 `createApp` 函数的诞生

当我们调用 createApp(rootComponent, rootProps) 时，Vue并非直接创建一个"活的"应用，而是精心构建了一个"应用实例上下文"（App Context）。这个上下文，如同一个独立的王国，拥有自己专属的组件、指令、插件注册表，以及全局配置。它确保了不同Vue应用实例间的配置互不干扰，为微前端等复杂场景铺平了道路。

让我们凝视这段源码的剪影（基于Vue 3核心逻辑简化）：

TypeScript 复制代码

// packages/runtime-dom/src/index.ts
import { 
  createAppAPI, 
  // ...其他导入
} from '@vue/runtime-core';
import { nodeOps } from './nodeOps'; // 平台相关的DOM操作
import { patchProp } from './patchProp'; // 平台相关的属性更新

const rendererOptions = { ...nodeOps, patchProp }; // DOM平台渲染器选项

let renderer; // 延迟创建渲染器

function ensureRenderer() {
  return renderer || (renderer = createRenderer(rendererOptions));
}

export const createApp = ((...args) => {
  // 1. 创建应用实例，核心逻辑在 createAppAPI 中
  const app = ensureRenderer().createApp(...args);

  const { mount } = app;

  // 2. 重写 mount 方法，以处理根组件的 props 和 provide
  app.mount = (containerOrSelector) => {
    const container = normalizeContainer(containerOrSelector);
    if (!container) return;

    const component = app._component;
    // 实际清空操作在核心mount函数内部执行
    const proxy = mount(container); // 调用核心 mount
    return proxy;
  };


  return app;
}) as CreateAppFunction<Element>;

TypeScript 复制代码

// packages/runtime-core/src/apiCreateApp.ts (createAppAPI 的核心)
export function createAppAPI<HostElement>(
  render: RootRenderFunction<HostElement> // 平台渲染函数
): CreateAppFunction<HostElement> {
  return function createApp(rootComponent, rootProps = null) {
    const context = createAppContext(); // ★ 创建应用上下文
    const installedPlugins = new Set();

    const app: App = {
      _component: rootComponent,
      _props: rootProps,
      _container: null,
      _context: context,

      use(plugin: Plugin, ...options: any[]) {
        // ... 插件注册逻辑 ...
        return app;
      },

      mixin(mixin: ComponentOptions) {
        // ... mixin 注册逻辑 ...
        return app;
      },

      component(name: string, component?: Component): any {
        // ... 组件注册逻辑 ...
        return app;
      },

      directive(name: string, directive?: Directive) {
        // ... 指令注册逻辑 ...
        return app;
      },

      mount(
        rootContainer: HostElement,
        isHydrate?: boolean,
        isSVG?: boolean
      ): any {
        // ★ 核心挂载逻辑的入口
        if (!app._container) {
          // 1. 基于根组件创建 VNode
          const vnode = createVNode(
            rootComponent,
            rootProps
          );
          vnode.appContext = context; // VNode关联应用上下文

          // 2. 调用渲染器进行渲染
          render(vnode, rootContainer, isSVG);
          
          app._container = rootContainer;
          // 暴露组件实例
          return vnode.component!.proxy;
        }
      },

      unmount() {
        // ... 卸载逻辑 ...
      },

      provide(key, value) {
        // ... provide 设置 ...
        return app;
      }
    };
    return app;
  };
}

在 createAppAPI 中，createAppContext() 的调用至关重要。它创建了一个包含 app (应用实例自身)、components、directives、provides、config.globalProperties 等的对象。这个 context 会被应用实例 app 持有 (app._context)，并在后续的组件创建和渲染过程中传递下去，确保了整个应用共享同一套配置和资源池。

1.2 设计思想：隔离带来的自由

这种设计的精妙之处在于，它将应用的状态和配置封装在了各自的 context 中。想象一下，如果你的页面需要同时运行两个独立的Vue应用，它们可能依赖不同版本的插件，或者有不同的全局组件命名。在Vue 2中，这几乎是天方夜谭。但在Vue 3中，createApp 赋予了我们这份从容和自由。每个 app 实例都是一个"自包含"的单元，它们如同平行宇宙，互不干扰，和谐共存。

实用场景思考： 多实例创建能力在微前端架构、页面中嵌入多个独立Vue小部件、或进行A/B测试不同版本的应用功能时，显得尤为强大。它使得代码组织更清晰，也极大提升了复杂应用的可维护性和可测试性。

第二部分：挂载过程 - `mount` 方法的执行机制

当 createApp 函数执行完毕后，一个具有完整功能的应用实例已经创建完成。但此时，它仍只存在于内存中，尚未与DOM建立联系。下一个关键步骤是 mount 方法的调用。这个方法负责将根组件转换为实际的DOM元素，并插入到指定的容器中。

2.1 `mount` 的执行流程

调用 app.mount('#app') 时，Vue内部经历了一系列精密的步骤：

容器定位与规范化： 首先，mount 方法会根据传入的选择器（如 '#app'）或DOM元素，找到真实的挂载目标容器。如果是一个字符串选择器，会调用 document.querySelector。
根组件VNode创建： 接着，它会基于 createApp 时传入的根组件 (app._component) 和可能的 rootProps，调用 createVNode 函数创建一个代表根组件的虚拟节点（VNode）。这个VNode是整个应用UI结构的起点。
渲染器登场： 这是整场演出的高潮！Vue会调用平台渲染器（在Web环境中通常是 runtime-dom 提供的 render 函数）将根VNode渲染到指定的容器中。这个 render 函数内部，蕴藏着Vue的响应式更新、Diff算法等核心魔法。
实例暴露与记录： 挂载完成后，mount 方法会返回根组件的实例（proxy），方便开发者进行直接操作。同时，应用实例会记录下挂载的容器元素。

深入 runtime-core 中与 mount 相关的 render 函数（由 createRenderer 创建），其核心是 patch 函数：

TypeScript 复制代码

// packages/runtime-core/src/renderer.ts (简化核心)
function createRenderer(options) {
  const {
    patchProp,
    insert,
    remove,
    createElement,
    // ...其他平台方法...
  } = options

  // 挂载组件核心流程
  const mountComponent = (vnode, container) => {
    // 1. 创建组件实例
    const instance = vnode.component = createComponentInstance(vnode)
    
    // 2. 设置组件（包含模板编译）
    setupComponent(instance)
    
    // 3. 设置并运行渲染副作用
    setupRenderEffect(instance, vnode, container)
  }

  // 创建响应式渲染副作用
  const setupRenderEffect = (instance, vnode, container) => {
    // 创建更新函数
    const update = instance.update = effect(() => {
      if (!instance.isMounted) {
        // 首次挂载
        const subTree = instance.subTree = renderComponent(instance)
        patch(null, subTree, container)
        vnode.el = subTree.el
        instance.isMounted = true
        
        // 触发mounted钩子
        if (instance.m) queuePostEffect(instance.m)
      } else {
        // 更新处理
        if (instance.next) {
          // 更新组件props
          updateComponentProps(instance, instance.next)
        }
        
        const nextTree = renderComponent(instance)
        const prevTree = instance.subTree
        instance.subTree = nextTree
        
        // 执行Diff更新
        patch(prevTree, nextTree, container)
        
        // 触发updated钩子
        if (instance.u) queuePostEffect(instance.u)
      }
    }, {
      // 异步更新调度
      scheduler: () => queueJob(update)
    })
    
    // 立即执行初始渲染
    update()
  }

  // 核心patch算法
  const patch = (n1, n2, container) => {
    if (n2.type === Text) {
      // 处理文本节点
    } else if (n2.type === Fragment) {
      // 处理Fragment
    } else if (n2.shapeFlag & ShapeFlags.ELEMENT) {
      // 处理DOM元素
      processElement(n1, n2, container)
    } else if (n2.shapeFlag & ShapeFlags.COMPONENT) {
      // 处理组件
      processComponent(n1, n2, container)
    }
    // ...其他节点类型...
  }

  // 渲染入口
  const render = (vnode, container) => {
    if (vnode == null) {
      // 卸载逻辑
      if (container._vnode) unmount(container._vnode)
    } else {
      // 更新或挂载
      patch(container._vnode || null, vnode, container)
    }
    container._vnode = vnode
  }

  return { render, createApp: createAppAPI(render) }
}

当我们首次 mount 时，patch 函数的第一个参数 n1（旧VNode）为 null，这告诉 patch 执行的是初始挂载流程，而非更新流程。setupRenderEffect 创建了一个响应式的副作用函数，它会执行组件的 render 函数（或模板编译后的渲染函数）生成子树VNode（subTree），然后调用 patch 将这个子树VNode渲染成真实的DOM。

2.2 设计思想：渲染器的可拔插与跨平台

Vue 3 的 mount 过程，最能体现其渲染器（Renderer）的可拔插设计 。runtime-core 模块定义了渲染的核心逻辑（如VNode的创建、组件的生命周期、Diff算法等），但它本身并不关心最终渲染到什么平台。真正的平台相关操作（如DOM的增删改查）被抽象到了 rendererOptions 中，由平台特定的渲染器（如 runtime-dom）提供。

实用场景思考： 这种设计使得Vue不仅能渲染到浏览器DOM，还能轻松扩展到其他平台，如服务端渲染（SSR）、Native（借助Weex或NativeScript）、Canvas（如图形编辑器）等。开发者甚至可以编写自己的渲染器，让Vue驱动自定义的渲染目标，这为Vue的生态扩展提供了无限可能。

第三部分：模板转换过程 - 从模板到虚拟DOM

在Vue的开发过程中，我们通常使用声明式的模板（template）来定义应用的UI结构。这种直观的抽象方式背后，是一套精密的转换机制，它将HTML风格的模板，转换为Vue实现高效界面更新的关键技术------虚拟DOM（Virtual DOM） 。

3.1 模板到虚拟DOM的转换过程

从模板字符串到虚拟节点（VNode），Vue主要经历了以下几个阶段（通常在构建时或首次运行时完成）：

解析（Parse）： 编译器首先将模板字符串解析成抽象语法树（AST）。AST是一种用JavaScript对象描述模板结构的树形数据结构，它精确地表达了模板中元素、属性、指令、插值等所有信息。
转换（Transform）： 在得到AST后，编译器会对其进行一系列转换操作。这个阶段会处理指令（如 v-if, v-for, v-model）、优化静态节点、处理事件绑定等，将AST转换为更适合生成渲染代码的中间表示。
生成（Generate）： 最后，编译器根据转换后的AST，生成JavaScript渲染函数（Render Function）的代码字符串。这个渲染函数，当被执行时，就会返回一个描述UI结构的VNode树。

当我们使用单文件组件（.vue文件）时，这个编译过程通常由 @vue/compiler-sfc 在构建阶段完成。关于模板编译时机，Vue 3有两种情况：

使用CDN引入的完整版（含编译器）会在运行时编译模板
使用Vite/vue-cli构建时，默认使用仅运行时构建（runtime-only），模板编译在构建阶段完成

3.2 `h` 函数：VNode的铸造者

渲染函数的核心，往往是 h 函数（在Vue 3中，它是 createVNode 的一个别名或包装，早期版本中可能是 _c）。h 函数接收参数（类型、属性、子节点），并返回一个VNode对象。VNode是一个轻量级的JavaScript对象，它描述了真实DOM节点的关键信息，如标签名、属性、子节点等。

例如，一个简单的模板：

html 复制代码

<div id="foo" class="bar">
  Hello {{ name }}
</div>

可能会被编译成类似这样的渲染函数（概念性，实际更复杂）：

TypeScript 复制代码

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", {
    id: "foo",
    class: "bar"
  }, " Hello " + _toDisplayString(_ctx.name), 1 /* TEXT */))
}

这里的 _createElementBlock (或 _createVNode) 就是 h 函数的变体，它负责创建 div 元素的VNode。_toDisplayString 用于处理插值。当这个渲染函数被执行时，它返回的VNode对象就精确描述了我们期望的DOM结构。

一个VNode对象大概长这样：

TypeScript 复制代码

{
  type: 'div', // 节点类型
  props: { id: 'foo', class: 'bar' }, // 节点属性
  children: [ // 子节点，可以是字符串或其他VNode
    { type: Text, children: 'Hello ' }, // 文本节点
    { type: Text, children: _ctx.name } // 动态文本节点
  ],
  el: null, // 对应的真实DOM元素（挂载后才有）
  key: null, // 用于Diff算法的key
  shapeFlag: ShapeFlags.ELEMENT | ShapeFlags.TEXT_CHILDREN, // 描述VNode类型的位图
  // ... 其他内部属性
}

3.3 设计思想：性能与抽象的平衡

虚拟DOM的引入，是Vue（以及许多现代前端框架）在性能与开发体验之间取得精妙平衡的关键。它带来了几大好处：

减少直接DOM操作： 直接操作DOM通常是昂贵的。Vue通过在内存中比较新旧VNode树（Diff算法），计算出最小的变更集，然后才一次性地、批量地更新真实DOM，大大提高了渲染效率。
声明式编程： 开发者只需关心"想要什么样"的UI（通过模板或JSX），而无需关心"如何实现"这一过程（DOM操作细节），降低了心智负担。
跨平台渲染的基石： VNode作为一种平台无关的UI结构描述，使得Vue的渲染逻辑可以轻松适配不同环境，如前文提到的 runtime-dom 和其他自定义渲染器。

实践启示： 理解VNode和编译过程，有助于我们写出更高效的模板。例如，利用 v-once 标记静态内容，或合理使用 key 来辅助Diff算法，都能在特定场景下带来性能提升。同时，当遇到渲染问题时，能从VNode层面思考，也更容易定位bug。

案例演示：串联起航

让我们用一个极简的例子，将这三幕剧串联起来，感受这趟旅程的完整脉络。

App.vue (根组件):

xml 复制代码

<template>
  <div class="app-container">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue Source!');

    const changeMessage = () => {
      message.value = 'Vue Source Explored!';
    };

    return {
      message,
      changeMessage
    };
  }
};
</script>

<style scoped>
.app-container {
  text-align: center;
  margin-top: 50px;
}
</style>

main.js (入口文件):

javascript 复制代码

import { createApp } from 'vue';
import App from './App.vue';

// 1. 应用创建 (第一幕)
const app = createApp(App); // 返回一个应用实例，App是根组件对象

// 2. 组件挂载 (第二幕)
app.mount('#app'); // 将应用挂载到 public/index.html 中的 <div id="app"></div>

流程回顾：

createApp(App) 执行：
- 内部调用 createAppAPI，创建一个应用上下文 context。
- 返回一个 app 对象，它持有 _component: App 和 _context，以及 mount 等方法。
app.mount('#app') 执行：
- 找到 document.getElementById('app') 作为挂载容器。
- 内部调用 createVNode(App) 创建根组件的VNode，此VNode关联了 app._context。
- Vue的编译器（如果是 .vue 文件，则在构建时）已将 App.vue 的 `
- 调用渲染器 (renderer.render)，传入根VNode和容器。
- 渲染器内部：
  - patch(null, rootVNode, container)：初次挂载。
  - processComponent 处理根VNode：(1)创建组件实例 (createComponentInstance)，(2)初始化Props/Slots (initProps/initSlots)，(3)执行setup函数 (setupStatefulComponent) (响应式的 message 被创建)，(4)编译模板 (如果需要运行时编译)，(5)完成组件设置 (finishComponentSetup)。
  - setupRenderEffect：设置一个副作用，它会执行 App 组件的渲染函数。
  - 注意：对于需要运行时编译的组件（提供了template选项字符串），编译发生在setupComponent()内部的compileComponent()阶段，处理完setup函数后，如果组件没有render函数但有template选项，会在此阶段进行编译，而非渲染副作用执行时。
  - App 的渲染函数执行，返回描述 div.app-container > h1 + button 结构的VNode树 (第三幕：虚拟DOM生成)。
  - patch 递归处理这个VNode树，将其转换为真实的DOM元素，并插入到 #app 容器中。
当点击按钮，changeMessage 被调用，message.value 改变：
- Vue的响应式系统捕获到这个变化。
- 依赖收集发生在渲染函数执行过程中： 当首次执行渲染函数访问响应式数据时，触发getter将当前渲染effect注册为依赖。setupRenderEffect只是创建了effect并首次执行渲染函数，但真正的依赖收集是在访问数据属性时发生的。而后续的更新调度是通过ReactiveEffect的scheduler（queueJob）实现的异步批量更新。这意味着当响应式数据变化时，不会立即触发组件重新渲染，而是将更新任务推入微任务队列，在下一个事件循环中批量执行，提高性能。这体现了Vue的"pull-based"依赖收集机制，依赖关系是在副作用函数首次执行时通过实际访问响应式属性建立的，而非声明时建立。
- App 的渲染函数再次执行，生成新的VNode树（h1 的文本内容已更新）。
- patch(prevTree, nextTree, container)：更新渲染，prevTree 是旧的VNode树，nextTree 是新的。
- Diff算法比较新旧VNode，发现只有 h1 的文本内容变化，高效更新对应的真实DOM。

这一连串行云流水的操作，正是Vue高效、声明式编程魅力的源泉。它们彼此协作，共同谱写了一曲从数据到视图的华美乐章。

结语：源码深处有乾坤

Vue 的源码，如同一座蕴藏丰富的宝库。今天，我们仅仅掀开了从创建到挂载这一核心流程的冰山一角。深入其中，你会发现更多精巧的设计、优雅的抽象和对极致性能的不懈追求。理解这些底层机制，不仅能让我们在日常开发中游刃有余，写出更健壮、更高效的代码，更能启发我们对软件工程普遍原理的思考。

这趟旅程或许艰辛，但每一步的探索都将化为滋养我们技术成长的甘霖。愿每一位热爱Vue、热爱技术的开发者，都能在源码的世界里，找到属于自己的那份"柳暗花明又一村"的惊喜与豁然开朗！

（本文基于 Vue 3.x 版本核心逻辑进行分析，具体实现细节可能随版本迭代有所调整。建议结合官方源码阅读以获得最准确信息。）

欲深入了解Vue源码，可参考 Vue.js官方GitHub仓库。

Vue源码解析-01：从创建到挂载的完整流程

第一部分：应用初始化 - createApp 的核心设计

1.1 createApp 函数的诞生

1.2 设计思想：隔离带来的自由

第二部分：挂载过程 - mount 方法的执行机制

2.1 mount 的执行流程

2.2 设计思想：渲染器的可拔插与跨平台

第三部分：模板转换过程 - 从模板到虚拟DOM

3.1 模板到虚拟DOM的转换过程

3.2 h 函数：VNode的铸造者

3.3 设计思想：性能与抽象的平衡

案例演示：串联起航

结语：源码深处有乾坤

第一部分：应用初始化 - `createApp` 的核心设计

1.1 `createApp` 函数的诞生

第二部分：挂载过程 - `mount` 方法的执行机制

2.1 `mount` 的执行流程

3.2 `h` 函数：VNode的铸造者