Vue.js 的页面渲染机制巧妙地将数据变化映射到用户界面，其核心在于响应式数据和虚拟DOM的高效协作。下面这张流程图概括了从组件初始化到视图更新的完整生命周期，可以帮助你快速建立整体印象：
css 体验AI代码助手 代码解读复制代码flowchart TD
A[初始化 Vue 实例] --> B[编译模板]
B --> C[生成渲染函数<br>render]
C --> D[执行渲染函数<br>生成VNode]
D --> E[Patch: 将VNode转化为<br>真实DOM]
E --> F[挂载到页面]
F --> G[数据变化触发<br>重新渲染]
G --> H[生成新VNode]
G --> I[保留旧VNode]
H & I --> J[Diff算法对比]
J --> K[最小化更新<br>真实DOM]
下面我们具体看看每个阶段的关键过程。
🔄 响应式数据与依赖追踪
Vue 渲染流程的驱动力来源于其响应式系统。当你将数据传入 Vue 实例时，Vue 会利用 Object.defineProperty(Vue 2) 或 Proxy(Vue 3) 将这些数据属性转换为响应式的。这个过程就像是给数据装上了“监听器”。 当组件执行渲染函数时，会读取这些响应式数据，从而触发它们的 getter。Vue 会在此时进行依赖收集，将当前组件的渲染 Watcher（可以理解为一个监听器）订阅到这个数据的变更上。一旦数据发生变化，setter 会通知所有订阅的 Watcher，Watcher 并不会立即重新渲染，而是将自己放入一个异步更新队列（这得益于 nextTick机制，它结合了微任务和宏任务），等待下一次事件循环时批量执行，避免不必要的重复计算。
📦 模板编译与渲染函数
我们写在 .vue文件里的 标签里的HTML-like语法，并不能被浏览器直接理解。Vue 需要先将它们编译成可执行的代码。编译过程主要包括三步：
解析：将模板字符串解析成抽象语法树，也就是代码的树状逻辑结构表示。
优化：遍历 AST，标记出静态节点。这些节点永远不会改变，在后续更新中可以跳过它们的比对过程，提升性能。
代码生成：将优化后的 AST 转换为渲染函数的字符串形式。这个函数执行后会返回一个描述页面结构的虚拟 DOM 节点。
例如，一个简单的模板
{{ message }}
经过编译后，生成的渲染函数大致如下（Vue 2 风格）：javascript 体验AI代码助手 代码解读复制代码with(this) {
return _c('p', [_v(_s(message))])
}
// _c 对应 createElement, _v 对应 createTextVNode, _s 对应 toString
⚡ 虚拟DOM与高效更新
虚拟DOM 是一个轻量级的 JavaScript 对象，它是对真实 DOM 的抽象。当数据变化触发重新渲染时，Vue 并不会直接操作真实 DOM，而是先调用渲染函数生成一个新的 VNode 树。 接着，Vue 会将新的 VNode 树与上一次渲染缓存的旧 VNode 树进行比对，这个比对过程就是 Diff 算法。Diff 算法会高效地找出两棵树之间的差异，并且只将必要的更改应用到真实 DOM 上。这种机制避免了直接操作真实 DOM 的巨大开销，特别是在复杂视图下，显著提升了性能。
🧩 组件化渲染
Vue 应用是由组件树构成的。每个组件实例都有自己的渲染 Watcher、响应式数据和作用域。父组件的渲染可能触发子组件的渲染，但子组件可以通过合理的优化（如 v-once、shouldUpdate或使用 Composition API的优化手段）来避免不必要的更新。keep-alive组件可以缓存非活动组件的实例，避免它们被销毁，当组件再次被激活时，可以直接使用缓存的 VNode，提升切换性能。
💡 理解渲染流程的实际价值
清晰地了解 Vue 的渲染流程，对于性能优化和问题排查非常有帮助：
合理使用 Key：在使用 v-for时，为每个项提供唯一且稳定的 key，能帮助 Diff 算法更准确地识别节点，减少不必要的 DOM 操作。
优化数据结构和计算：避免在模板中放入过于复杂或需要大量计算的表达式，可以利用计算属性的缓存特性来优化。
注意响应式数据的粒度：确保数据结构的扁平化，过深的嵌套或巨大的对象可能会带来不必要的响应式开销（尤其在 Vue 2 中）。
希望这些解释能帮助你更深入地理解 Vue 的页面渲染流程。如果你对某个特定环节，比如响应式系统的详细实现或者 Diff 算法的具体策略有进一步的兴趣，我们可以继续探讨。
作者：武天
链接：https://juejin.cn/post/7562354486637805603
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。