说说Vue 页面渲染流程

武天
135 阅读4分钟

Vue.js 的页面渲染机制巧妙地将数据变化映射到用户界面，其核心在于​​响应式数据​​和​​虚拟DOM​​的高效协作。下面这张流程图概括了从组件初始化到视图更新的完整生命周期，可以帮助你快速建立整体印象：

image.png

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文件里的 <template>标签里的HTML-like语法，并不能被浏览器直接理解。Vue 需要先将它们​​编译​​成可执行的代码。编译过程主要包括三步：

  1. ​​解析​​：将模板字符串解析成​​抽象语法树​​，也就是代码的树状逻辑结构表示。
  2. ​​优化​​：遍历 AST，标记出​​静态节点​​。这些节点永远不会改变，在后续更新中可以跳过它们的比对过程，提升性能。
  3. ​​代码生成​​：将优化后的 AST 转换为​​渲染函数​​的字符串形式。这个函数执行后会返回一个描述页面结构的​​虚拟 DOM 节点​​。

例如，一个简单的模板 <p>{{ message }}</p>经过编译后，生成的渲染函数大致如下（Vue 2 风格）：

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 算法的具体策略有进一步的兴趣，我们可以继续探讨。

avatar
文章
阅读
粉丝