Vue3 应用实例创建及页面渲染底层原理

整体流程

完整的创建与渲染流程可以分成这些阶段：

创建 App 实例
创建根组件实例
设置响应式状态
创建渲染器（Renderer）
挂载 Mount
vnode -> DOM 渲染
数据变更触发更新
重新渲染 / diff / patch

流程图大致如下：

Plain 复制代码

createApp() ───> app.mount('#app')
         │                 │
         ▼                 ▼
   createRootComponent    createRenderer
         │                 │
         ▼                 ▼
 setup() / render()   render(vnode) -> patch
         │                 │
         ▼                 ▼
   effect(fn) ────> scheduler -> patch updates

1、createApp 初始化

Vue 应用的入口通常是：

JavaScript 复制代码

createApp(App).mount('#app')

从源码看 createApp：

TypeScript 复制代码

// packages/runtime-core/src/apiCreateApp.ts
export function createAppAPI(render) {
  return function createApp(rootComponent, rootProps = null) {
    const app = {
      _component: rootComponent,
      _props: rootProps,
      _container: null,
      _context: createAppContext()
    }
    const proxy = (app._instance = {
      app
    })
    // register global APIs
    // ...
    return {
      mount(container) {
        const vnode = createVNode(rootComponent, rootProps)
        app._container = container
        render(vnode, container)
      },
      unmount() { /* ... */ }
    }
  }
}

关键点：

createAppAPI(render) 生成 createApp 函数
app 内保存 _component、上下文 _context
app.mount 调用 render(vnode, container)

render 由 平台渲染器 注入（在 web 下是 DOM 渲染器）。

2、createVNode 创建虚拟节点（VNode）

在 mount 前会创建一个虚拟节点：

TypeScript 复制代码

function createVNode(type, props, children) {
  const vnode = {
    type,
    props,
    children,
    shapeFlag: getShapeFlag(type),
    el: null,
    key: props && props.key
  }
  return vnode
}

vnode 是渲染的基础单元：

shapeFlag 用来快速判断 vnode 类型，是内部性能优化。

3、渲染器 Renderer 初始化

Vue3 是平台无关的（runtime-core），真正依赖 DOM 的是在 runtime-dom 中。

创建 Renderer：

TypeScript 复制代码

export const renderer = createRenderer({
  createElement: hostCreateElement,
  patchProp: hostPatchProp,
  insert: hostInsert,
  remove: hostRemove,
  setElementText: hostSetElementText
})

createRenderer 返回了我们前面在 createApp 中使用的 render(vnode, container) 函数。

4、render & patch

核心渲染入口：

TypeScript 复制代码

function render(vnode, container) {
  patch(null, vnode, container, null, null)
}

patch 是渲染补丁函数：

TypeScript 复制代码

function patch(n1, n2, container, parentComponent, anchor) {
  const { type, shapeFlag } = n2
  if (shapeFlag & ShapeFlags.ELEMENT) {
    processElement()
  } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) {
    processComponent(...)
  }
}

简化为：

如果是 DOM 元素 vnode → 挂载/更新
如果是 组件 vnode → 创建组件实例、挂载、渲染子树

5、组件实例创建

当渲染组件时：

TypeScript 复制代码

function processComponent(n1, n2, container, parentComponent, anchor) {
  mountComponent(n2, container, parentComponent, anchor)
}
function mountComponent(vnode, container, parentComponent, anchor) {
  const instance = createComponentInstance(vnode, parentComponent)
  setupComponent(instance)
  setupRenderEffect(instance, container, anchor)
}

processComponent 处理组件
mountComponent 挂载组件
- createComponentInstance 创建组件实例
- setupComponent 创建组件对象

createComponentInstance：

TypeScript 复制代码

function createComponentInstance(vnode, parent) {
  const instance = {
    vnode,
    parent,
    proxy: null,
    ctx: {},
    props: {},
    attrs: {},
    slots: {},
    setupState: {},
    isMounted: false,
    subTree: null
  }
  return instance
}

实例保存基础信息，还没运行 setup。

6、 setupComponent（初始化组件）

TypeScript 复制代码

function setupComponent(instance) {
  initProps(instance, vnode.props)
  initSlots(instance, vnode.children)
  setupStatefulComponent(instance)
}

内部会执行：

TypeScript 复制代码

const { setup } = Component
if (setup) {
  const setupResult = setup(props, ctx)
  handleSetupResult(instance, setupResult)
}

setup 返回值：

返回对象 → 作为响应式状态 state
返回函数 → render 函数

最终让组件拥有 instance.render。

7、创建响应式状态

Vue3 的响应式来自 reactivity 包：

JavaScript 复制代码

const state = reactive({ count: 0 })

底层是 Proxy 拦截 getter/setter：

getter：收集依赖
setter：触发依赖更新

依赖管理核心是 effect / track / trigger。

8、 setupRenderEffect 与首次渲染

创建渲染器副作用，并调度组件挂载和异步更新：

TypeScript 复制代码

function setupRenderEffect(instance, container, anchor) {
  instance.update = effect(function componentEffect() {
    if (!instance.isMounted) {
      const subTree = (instance.subTree = instance.render.call(proxy))
      patch(null, subTree, container, instance, anchor)
      instance.isMounted = true
    } else {
      // 更新更新逻辑
    }
  }, {
    scheduler: queueJob
  })
}

这里：

创建一个 响应式 effect
第一次执行 render 得到 subTree
patch 子树到 DOM

effect + scheduler 实现异步更新。

9、vnode-> 真实 DOM（DOM mount）

当 patch 到真正的 DOM 时，走的是 element 分支：

TypeScript 复制代码

function processElement(...) {
  if (!n1) {
    mountElement(vnode, container)
  } else {
    patchElement(n1, n2)
  }
}

mountElement

TypeScript 复制代码

function mountElement(vnode, container) {
  const el = (vnode.el = hostCreateElement(vnode.type))
  // props
  for (key in props) {
    hostPatchProp(el, key, null, props[key])
  }
  // children
  if (typeof children === 'string') {
    hostSetElementText(el, children)
  } else {
    children.forEach(c => patch(null, c, el))
  }
  hostInsert(el, container)
}

10、更新 & Diff 算法

当响应式状态改变：

JavaScript 复制代码

state.count++

触发 setter → trigger：

将 effect 放入更新队列
异步执行 scheduler
调用 instance.update 再次 patch

更新阶段：

TypeScript 复制代码

patchElement(n1, n2)

核心逻辑：

props diff
children diff
unkeyed/keyed diff 算法（最小化移动）

具体见 patchChildren 和 patchKeyedChildren。

整体核心对象关系架构

Plain 复制代码

App
 └─ vnode(root)
     └─ ComponentInstance
         ├─ props / slots
         ├─ setupState
         └─ render() -> subTree
             └─ vnode tree
                 └─ DOM nodes

响应式依赖结构：

Plain 复制代码

reactive state
 ├─ effects[]
 └─ track -> effect
              └─ scheduler -> patch