VUE3 性能提升(浅析)

静态提升

对于子孙节点上有动态数据的节点而言，为了性能的极致，会将节点上的属性数据提出去，再 render 的时候不再次寻找，直接使用

javascript

<template>
	<div>
		<div class="container">
			<div class="header">{{ count }}</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
</script>

<style scoped></style>

预字符串化

当编译器遇到大量连续的静态内容，（20 个节点以上），会直接将其转化为一个普通字符串节点

javascript

<template>
	<div>
		<div class="container">
			<div class="header">111</div>
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				<li>14</li>
				<li>15</li>
				<li>16</li>
				<li>17</li>
				<li>18</li>
				<li>19</li>
				<li>20</li>
			</ul>
		</div>
	</div>
</template>

<script setup lang="ts"></script>

<style scoped></style>

缓存静态节点 & 缓存方法

对于一个纯静态节点，会将其缓存起来，后续 render 直接使用，不重新 createVNode

Block Tree

vue2 中，组件更新时会对整个虚拟 DOM 树进行全量 diff，包括静态节点

Block Tree 解决了这个问题

简单来说就是 Block Tree 记录了那些是静态节点那些是动态节点，在发生更新操作时，只更新动态节点

/_ HOISTED _/ 静态节点 -1

/_ NEED_PATCH _/ 动态节点需要 patch

PatchFlag

精准标记的方案动态节点是哪种

Vue 3 通过 PatchFlag 精确标记动态部分，运行时只需处理标记对应的部分。例如：

标记为 TEXT 的节点，更新时只检查文本内容，跳过属性对比；
标记为 NEED_PATCH 的节点（如你的输入框），则针对性处理动态绑定的事件和值。

数值	常量名	含义
1	TEXT	节点包含动态文本（如）
2	CLASS	节点类名是动态的（如 `:class` ）
4	STYLE	节点样式是动态的（如 `:style` ）
8	PROPS	节点有动态属性（非 class/style）
512	NEED_PATCH	节点需要完整补丁更新（如含指令）

VUE3 性能提升(浅析) ​

静态提升 ​

预字符串化 ​

缓存静态节点 & 缓存方法 ​