Patch 过程中如何识别组件更新？深度解析 shouldUpdateComponent 逻辑-Vue.js-PHP中文网

shouldupdatecomponent 是 vue 组件更新的前置守门人，在父组件 patch 子组件前调用，通过浅比较 props、children、slots 引用决定是否跳过 diff；支持自定义逻辑，纯函数无 this，比 react 的 shouldcomponentupdate 更轻量且默认启用。

patch 过程中如何识别组件更新？深度解析 shouldupdatecomponent 逻辑

Vue 的 patch 过程本身不直接“识别”组件是否需要更新，而是由上层调度机制提前决定——shouldUpdateComponent 就是这个关键的守门人。它在 patch 开始前被调用，返回 false 会跳过整个子组件的 diff 和 DOM 更新流程，是性能优化的第一道防线。

shouldUpdateComponent 的触发时机

它不是在 patch 函数内部执行的，而是在父组件执行 patchComponent（或 processComponent）时、准备对子组件 VNode 做比对前调用的。具体发生在：

父组件的 patch 流程走到子组件节点（n2.type === ComponentOptions）
发现旧子组件实例已存在（n1 !== null 且 n1.component !== undefined）
立即调用 shouldUpdateComponent(n1, n2)，传入新旧 VNode

默认逻辑：浅比较 props、children、slots

Vue 3 的默认实现会对以下三类内容做浅比较（=== 或 Object.is）：

Props：遍历新旧 VNode 的 n2.props 与 n1.props，逐个 key 比较值是否变化
Children：比较 n2.children 与 n1.children 是否为同一引用（不 deepEqual）
Slots：比较 n2.slots 与 n1.slots 引用是否一致（注意：函数式插槽即使内容相同，每次渲染也生成新函数，易导致误判）

只要其中任一项目有变化，就返回 true，表示需更新；全部未变则返回 false，跳过该子组件后续所有操作。

自定义 shouldUpdateComponent 的写法

你可以在组件选项中显式定义它，覆盖默认行为：

在 defineComponent 中作为 options 传入：{ shouldUpdateComponent: (prevVNode, nextVNode) => { ... } }
在 setup 返回对象中不可用，必须通过 defineComponent({ ..., shouldUpdateComponent }) 方式声明
典型用途：忽略某些不影响视图的 prop 变化（如仅用于日志的 debugId），或基于业务逻辑判断（如只在 status === 'done' 时才更新）