shouldUpdateComponent 是 Vue 3 中组件定义时可配置的纯函数选项，用于在 patch 前决定是否跳过子组件 diff；默认浅比较 props、children 和 slots 的引用，任一变化即更新，全未变则跳过；可自定义以忽略无关 prop、按业务状态控制更新或稳定插槽函数。
Vue.js 优化组件重渲染，关键不在“要不要 diff”，而在于“要不要进入 diff”——shouldUpdateComponent 就是那个提前把关的守门人。
shouldUpdateComponent 是什么
它不是生命周期钩子，也不是 setup 里的函数，而是组件定义时可配置的一个纯函数选项。在父组件 patch 子组件前被调用，接收新旧两个 VNode（n1 和 n2）作为参数。仅当它返回 true，Vue 才会继续执行子组件的 diff、re-render 和 DOM 更新；返回 false，整棵子树直接跳过，不生成新 VNode，也不触发任何渲染逻辑。
它的触发前提是：子组件已挂载（n1.component 存在），且当前要 patch 的节点类型是组件（n2.type 是组件构造器）。
默认行为怎么判断是否更新
Vue 3 默认实现做的是浅比较，只看三类内容的引用是否变化：
立即学习“前端免费学习笔记（深入）”；
-
Props：遍历所有 key，任一 value 的引用不同（
!==或Object.is为 true）即认为需更新 -
Children：直接比较
n1.children === n2.children，不递归比对内容 -
Slots：比较
n1.slots === n2.slots；注意函数式插槽每次渲染都新建函数，极易误判为“变”
只要其中一项有引用变化，就放行更新；全部未变才返回 false，跳过整个子组件流程。
什么时候需要自定义 shouldUpdateComponent
默认浅比较足够大多数场景，但以下情况值得手动干预：
- 传入仅用于埋点、调试的 prop（如
debugId），业务上不影响视图，应忽略其变化 - 希望按业务状态控制更新节奏，例如只在
props.status === 'success'时才允许重渲染 - 插槽内容实际没变，但因函数引用不稳定导致频繁更新，可配合
useMemo或 ref 缓存插槽函数
写法示例：
export default defineComponent({name: 'MyComponent',
props: { status: String },
shouldUpdateComponent(n1, n2) {
return n2.props?.status === 'done';
}
});
和 React shouldComponentUpdate 的本质区别
名字相似，但定位完全不同：
- React 的
shouldComponentUpdate是实例方法，可访问this.props和this.state，默认返回 true，几乎必须重写才有意义 - Vue 的
shouldUpdateComponent是无状态纯函数，只依赖两个 VNode 参数，不涉及 this、无副作用，且 Vue 默认已启用合理浅比较，多数场景无需干预 - 它是响应式更新链路中更前置的一道防线，天然适配编译优化（如 patch flag、静态提升）
