Vue属性补丁更新本身性能开销小，仅浅层变化时才更新DOM；但混用attribute/property、高频引用变更或副作用链（如强制重排）会间接导致性能问题，真实瓶颈多在上游逻辑而非patch本身。
Vue.js 中 VNode 属性补丁更新（patch）与 DOM 属性映射本身不会引入显著性能损耗，但不当使用或误解机制时，可能触发冗余操作、强制同步重排或意外的属性/特性（attribute vs property）混淆，间接影响性能。
属性补丁的本质是“有差异才更新”
Vue 的 patch 过程会对比新旧 VNode 的 props（即绑定的属性对象），仅当值发生**浅层变化**（如字符串、布尔值、数字改变）时，才执行 DOM 更新。它不会无差别遍历所有属性：
- 未变化的 prop（如
:id="staticId"值未变）——跳过 DOM 操作 - 从 `undefined` → `null` 或 `false` → `true` 等明确变更——触发 setAttribute / setProperty
- 绑定的是响应式对象字段（如
:disabled="form.isDisabled"）——依赖追踪生效，变更时才触发 patch
attribute 和 property 混用易引发隐性开销
Vue 对常见 DOM 属性做了智能映射：对 value、checked、selected、disabled 等使用 property 赋值（更高效且符合用户预期）；对自定义属性（如 data-*）或非标准属性则走 setAttribute。但若手动混用，可能出问题：
- 用
v-bind:disabled="bool"✅ —— 正确设置el.disabledproperty - 误写为
v-bind:attr-disabled="bool"❌ —— 触发无效 attribute 设置，还可能被 Vue 忽略或报错 - 在组件中透传 props 时未过滤非 DOM 属性（如把
onUpdate也传给根元素）——导致 Vue 尝试设置不存在的 property，产生警告并轻微拖慢 patch
高频更新场景需主动节流或冻结静态属性
当组件频繁 re-render（如每帧更新的 canvas 容器、实时日志列表），即使属性值“逻辑未变”，也可能因引用变化（如每次渲染新建对象）触发无意义 patch：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 避免内联对象/函数：❌
:style="{ color: textColor }"→ ✅ 提前定义computed或const style = { color } - 对完全静态属性（如固定
tabindex="0"），优先用模板字面量而非v-bind，跳过响应式追踪和 patch 判断 - 使用
v-memo（Vue 3.2+）包裹稳定子树，使整个 VNode 子树跳过 diff
真实瓶颈通常不在 patch 本身，而在副作用链
测量发现，90% 的“属性更新慢”案例实际源于：
- 监听器中执行重绘操作（如修改 class 后立即调用
getBoundingClientRect()） - 属性变更触发 computed 重新求值 + 模板大量插值 → VNode 重建成本远高于 patch
- 第三方库（如某些 UI 组件）在
updated钩子中强制reflow（如读取 offsetHeight）
建议用 Chrome DevTools 的 **Performance 面板录制 + “Render” 火焰图**定位：若高亮集中在 patchProp 或 setAttr，再优化属性绑定方式；若集中在 JS 执行或 Layout，说明问题在上游逻辑。
