PatchFlags.PROPS(值为8)是Vue 3中标识响应式普通属性绑定的动态标记,仅针对:id、:disabled等以:attr="value"声明的响应式HTML属性,排除class、style、事件等;它使运行时仅比对更新标记属性,避免全量props遍历,相比FULL_PROPS实现精准高效更新。

PatchFlags.PROPS 是什么
PatchFlags.PROPS(值为 8)是 Vue 3 编译器在生成 VNode 时打上的一个动态标记,表示该节点存在**响应式的普通属性绑定**,且这些属性既不是 class,也不是 style,也不属于文本内容。它告诉运行时:“只需比对并更新这些被绑定的 props,其余属性(如静态 class、固定 style、事件监听器等)全都不用动。”
它具体覆盖哪些属性
PROPS 标记针对的是模板中以 :attr="value" 形式声明的响应式 HTML 属性,常见包括:
-
:id、:name、:data-id、:aria-label、:tabindex -
:disabled、:required、:readonly(布尔属性,绑定响应式变量时) -
:href、:src、:alt(当值来自响应式数据时)
注意:它不包含 class(归 CLASS 管)、style(归 STYLE 管)、文本子节点(归 TEXT 管)、事件处理器(如 @click,走独立事件 patch 路径)。
它怎么提升性能
没有 PROPS 标记时,Vue 可能需要遍历整个 props 对象,逐个比对 key 和 value;有了它,运行时 patch 流程会直接跳过所有未绑定响应式数据的属性,只聚焦于明确标记为动态的那几个。
- 比如:
<input :id="uid" :disabled="isLocked" value="static" class="form-input"> - 编译后会打上
PatchFlags.PROPS(即数字 8) - 更新时仅检查
id和disabled是否变化,value和class完全不参与 diff
和 FULL_PROPS 的关键区别
PROPS 是“精准定位”——编译器清楚知道哪几个属性是响应式的,所以只更新它们。
FULL_PROPS(值为 16)则是“保守兜底”——当模板写法让编译器无法静态分析出具体哪些属性会变(例如 v-bind="obj" 或 v-bind="{ id: x, class: y }"),就退化为完整 props 比对,失去靶向性。
换句话说:PROPS 是优化态,FULL_PROPS 是降级态。写明确的 :id、:disabled 就能稳定触发 PROPS,避免意外掉进 FULL_PROPS 的低效路径。

















