Vue.js 组件重渲染优化中的 shouldUpdate 机制探讨

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、静态提升）