当前位置：首页 > news >正文

Vue3 编译优化

news 2026/6/6 9:23:27

一、Vue 3 编译优化的核心背景

Vue 2 的虚拟 DOM 存在一个核心问题：每次数据更新时，会对整个虚拟 DOM 树进行全量对比（diff），哪怕大部分节点是静态的（不会变），也会被遍历对比，造成性能浪费。
Vue 3 的编译优化核心思路是：在编译阶段提前分析模板，给节点打标记、做预处理，让运行时的 diff 只对比「真正需要更新的节点」，从「全量 diff」变成「定向 diff」，大幅提升性能。

二、核心编译优化点详解

静态提升（Static Hoisting）
概念
把模板中不会随数据变化的静态节点 / 属性（比如纯文本、固定样式、无绑定的标签）从渲染函数中「提升」出去，只在初始化时创建一次，后续更新时复用，避免每次渲染都重新创建虚拟 DOM 节点。
对比示例

Vue 2 编译结果（伪代码）

// 每次渲染都会重新创建 <div>Hello</div> 这个静态节点functionrender(){returncreateVNode('div',null,[createVNode('div',null,'Hello'),// 静态节点，每次都重建createVNode('span',null,state.msg)// 动态节点])}

Vue 3 编译结果（伪代码）：

// 静态节点被提升到渲染函数外部，只创建一次consthoisted=createVNode('div',null,'Hello')functionrender(){returncreateVNode('div',null,[hoisted,// 复用已创建的静态节点createVNode('span',null,state.msg)])}

实际模板示例

<template> <!-- 静态节点：无任何动态绑定，会被提升 --> <div class="title">Vue 3 编译优化</div> <!-- 动态节点：依赖 msg 数据 --> <div>{{ msg }}</div> </template>

Vue 3 编译时会把<div class="title">Vue 3 编译优化</div>提升到渲染函数外，只有<div>{{ msg }}</div>会在每次更新时重新处理。

树结构打平（Tree Flattening）
概念
Vue 3 会把嵌套的虚拟 DOM 树「打平」成一个数组结构，避免深度递归遍历。简单说：把多层嵌套的节点，转换成一维数组，记录每个节点的父子关系，diff 时只需遍历一维数组，无需递归，降低时间复杂度。
对比理解

Vue 2 虚拟 DOM 结构（嵌套树）：

// 嵌套结构，diff 时要递归遍历constvnode={tag:'div',children:[{tag:'ul',children:[{tag:'li',children:[{tag:'span',children:'1'}]},{tag:'li',children:[{tag:'span',children:'2'}]}]}]}

Vue 3 虚拟 DOM 结构（打平数组）：

// 打平成数组，记录 parent/children 索引，无需递归constvnodes=[{tag:'div',children:[1]},// 索引 0：div，子节点是索引 1{tag:'ul',children:[2,3]},// 索引 1：ul，子节点是 2、3{tag:'li',children:[4]},// 索引 2：li，子节点是 4{tag:'li',children:[5]},// 索引 3：li，子节点是 5{tag:'span',children:'1'},// 索引 4：span{tag:'span',children:'2'}// 索引 5：span]

diff 时只需遍历这个一维数组，通过索引快速找到父子节点，效率远高于递归嵌套树。

PatchFlags（补丁标记）
概念
Vue 3 在编译阶段给动态节点打上「补丁标记」，标记该节点的「动态类型」（比如仅文本更新、仅 class 更新、仅属性更新等）。运行时 diff 时，只根据标记检查对应类型的变化，无需全量对比节点的所有属性。
核心 PatchFlags 枚举（常用）
| 标记值 | 含义 | 场景示例 |
| ------------ | ------------- | ----------------|
| 1 | TEXT |<div>{{ msg }}</div>|
| 2 | CLASS |<div :class="cls"></div>|
| 4 | STYLE |<div :style="sty"></div>|
| 8 | PROPS |<div :id="id"></div>|
| 64 | FULL_PROPS |含动态 key 的属性（如 :[key]="val"）|
| 128 | HYDRATE_EVENTS |绑定了事件的节点|

示例
模板：

<template> <div :class="boxCls" id="box">{{ content }}</div> </template>

Vue 3 编译后，该节点会被打上 PatchFlags.TEXT | PatchFlags.CLASS（即 1 + 2 = 3）的标记。运行时更新时，只会检查：

文本内容（content）是否变化；
class 属性（boxCls）是否变化；
完全忽略 id=“box” 这个静态属性，也不会检查其他无关属性，精准更新。

缓存优化
Vue 3 对编译后的渲染函数、计算属性、事件处理等做了多层缓存，核心包括：

缓存渲染函数
编译后的渲染函数会被缓存，只有模板变化时才重新编译，避免重复解析模板。
缓存事件处理函数
对 @click=“handleClick” 这类无参数的事件绑定，Vue 3 会缓存函数引用，避免每次渲染都创建新函数（解决 Vue 2 中 @click=“() => handleClick(1)” 导致的不必要更新问题）。
缓存 vnode 创建
对于结构固定的动态节点（如 v-for 中固定结构的项），复用 vnode 结构，只更新动态数据。

示例：

<template> <!-- handleClick 会被缓存，不会每次渲染创建新函数 --> <button @click="handleClick">点击</button> <!-- 带参数的箭头函数，Vue 3 不会优化缓存，每次编译生成新的箭头函数 --> <button @click="() => handleClick(1)">点击传参</button> </template>