Hoey

外观

渲染流程

约 375 字大约 1 分钟

2026-02-05

问题

简述 Vue3 的渲染流程？

Vue 的页面渲染流程主要分为以下几个阶段：

  1. 编译模板

    • 将模板（template）或单文件组件（SFC）中的 HTML 编译为 render 函数（在运行时或构建时完成，取决于是否使用 Vue 的完整版或运行时-only 版本）。
    • 编译过程包括：解析 → 优化（标记静态节点）→ 生成（输出 render 函数）。

  2. 创建响应式数据

    • 使用 reactive()（Vue 3）或 Object.defineProperty（Vue 2）将 data 转为响应式对象。
    • 建立依赖收集机制：当 render 函数访问响应式数据时，会触发 getter，自动收集依赖（即当前组件的更新函数）。

  3. 首次渲染

    • 执行 render 净函数，生成 虚拟 DOM（VNode）。
    • 调用渲染器（renderer）将 VNode 转为真实 DOM，并挂载到指定容器。

  4. 响应式更新

    • 当响应式数据变更时，触发 setter，通知相关依赖（即组件的更新函数）。
    • 重新执行 render 函数生成新 VNode。
    • 通过 diff 算法 对比新旧 VNode，计算出最小 DOM 操作。
    • 批量、异步地应用这些操作（Vue 3 中使用 Promise.then / queueMicrotask 实现 nextTick 机制）。

  5. 销毁

    • 组件卸载时，清除所有订阅和副作用，避免内存泄漏。

Vue 3 使用 Proxy 实现更完善的响应式系统，支持 Map/Set、数组索引等；同时引入编译时优化（如 Block Tree、PatchFlags）提升运行时性能。