Vue 3 运行机制_vue程序运行过程

myzbx 2025-09-04 13:57 44 浏览

当你写下 <div>{{ msg }}</div>，浏览器最终看到的却是一连串精确到像素的绘制指令。Vue 3 在这条链路里扮演了「翻译官 + 调度者」的双重角色：把声明式模板翻译成渲染函数，再把渲染函数翻译成真实 DOM，并在数据变化时以最小代价更新视图。

一、描述 UI

模板直观，虚拟 DOM 灵活。Vue 3 并不强迫二选一，而是提供一条双向通道：

模板先经过编译器变成渲染函数；
渲染函数执行后得到虚拟 DOM（JS 对象），再交给渲染器绘制成真实节点；
在需要极致灵活性的场景，你可以直接手写渲染函数，绕过模板阶段。

示例：

等价虚拟节点：

虚拟节点把「标签、属性、事件、层次」全部扁平化为可序列化对象，为后续 diff 和跨端渲染奠定数据结构。

二、编译器

编译器内部是一条三段流水线：

解析器把模板字符串解析为模板 AST；
转换器把模板 AST 变成 JavaScript AST，同时进行静态提升、事件缓存、PatchFlag 标记；
生成器把 JavaScript AST 打印为真正的渲染函数源码。

结果示例：

生成：

静态节点被提升为常量，动态节点被打上 PatchFlag，运行时 diff 只需关注真正会变化的部分。

三、渲染器

渲染器只做三件事：

创建元素：递归遍历虚拟节点，调用 document.createElement；
安装属性与事件：识别以 on 开头的事件名，统一绑定；
处理子节点：字符串直接 createTextNode，数组递归渲染。

简化实现：

真实代码在此之上增加了 Block Tree 与 PatchFlag 优化，只对动态节点调用 DOM API，其余跳过。

四、组件本质

当 vnode.tag 是函数或对象时，渲染器识别为组件：

渲染器会先执行该函数（或对象的 render 方法），拿到新的虚拟节点后再继续渲染。这一过程递归进行，形成「组件 → 虚拟节点 → 真实 DOM」的层级展开。

五、响应式系统

渲染函数执行时，会读取响应式数据（ref/reactive）。Vue 3 通过 Proxy 把每一次读取都记录为依赖，每一次写入都触发副作用：

读取时：将当前渲染函数（effect）压入 WeakMap → Map → Set 的三级依赖图；
写入时：从图中取出对应 effect，调度到微任务队列；
队列 flush 时，重新执行渲染函数，得到新的虚拟节点，再进入 diff 流程。

这套机制保证：

数据变化 → 最小化 DOM 更新；
开发者无需手动调用 setState，也无需担心数组索引新增、对象属性删除等边界情况。

六、完整闭环

开发者写模板；
编译器产出渲染函数；
渲染函数首次执行 → 虚拟 DOM → 真实 DOM（首屏）；
用户交互 → 响应式数据变更；
渲染函数再次执行 → 新虚拟 DOM；
渲染器 diff → 只更新变化节点，其余复用。

总结

Vue 3 的运行机制可以浓缩成一句话：

用编译器把模板编译成可树摇的渲染函数，用 Proxy 追踪数据依赖，用渲染器把虚拟 DOM 映射到最小真实 DOM 更新。

JS 函数绑定

上一篇：如何给网站添加 https_如何给网站添加图片
下一篇：新手做公众号，20个常见问题汇总_做公众号的问题

Vue 3 运行机制_vue程序运行过程

一、描述 UI

二、编译器

三、渲染器

四、组件本质

五、响应式系统

六、完整闭环

总结

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿