Vue.js 组件重渲染优化的核心，不在于“是否执行 diff”，而在于“是否允许进入 diff”——shouldUpdateComponent 正是那个预先把关的守卫者。它并非生命周期钩子，也不是 setup 中的函数，而是组件定义时可配置的一个纯函数选项。在父组件更新子组件之前被调用，接收新旧两个 VNode（n1 和 n2）作为参数。只有当它返回 true 时，Vue 才会继续执行子组件的 diff、重新渲染和 DOM 更新操作；若返回 false，则整个子树直接跳过，既不会生成新 VNode，也不会触发任何渲染逻辑。它的触发条件是：子组件已经挂载（n1.component 存在），且当前正在 patch 的节点类型是组件（n2.type 是组件构造器）。
shouldUpdateComponent 是什么
shouldUpdateComponent 是 Vue 组件定义时的一个开关选项，主要作用是在父组件准备更新子组件之前，先询问：“这个子组件是否真的需要更新？” 如果答案为“是”，Vue 才启动 diff 流程；如果“否”，则整个子组件树直接跳过，节省性能开销。它本质上是一个纯函数——只依赖两个 VNode 参数，没有副作用，不会访问组件实例。这种设计天然适合编译优化，例如 patch flag 和静态提升。
默认行为怎么判断是否更新
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、静态提升）。
