fix(runtime-core): prevent child component updates when style remains unchanged

[edison1105]

close #12826

Summary by CodeRabbit

• Bug Fixes
  • Improved component rendering optimization to prevent unnecessary re-renders when style properties have not changed, enhancing performance for components with static styles.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	104 kB (+78 B)	39.3 kB (+24 B)	35.4 kB (+31 B)
vue.global.prod.js	162 kB (+78 B)	59.3 kB (+27 B)	52.8 kB (+11 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	47.8 kB (+655 B)	18.6 kB (+220 B)	17.1 kB (+177 B)
createApp	55.9 kB (+655 B)	21.7 kB (+212 B)	19.8 kB (+178 B)
createSSRApp	60.2 kB (+655 B)	23.4 kB (+213 B)	21.4 kB (+178 B)
defineCustomElement	61.6 kB (+655 B)	23.4 kB (+211 B)	21.4 kB (+167 B)
overall	70.4 kB (+655 B)	27 kB (+224 B)	24.6 kB (+180 B)

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

pnpm add https://pkg.pr.new/@vue/compiler-core@12825

npm i https://pkg.pr.new/@vue/compiler-core@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-dom

pnpm add https://pkg.pr.new/@vue/compiler-dom@12825

npm i https://pkg.pr.new/@vue/compiler-dom@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-sfc

pnpm add https://pkg.pr.new/@vue/compiler-sfc@12825

npm i https://pkg.pr.new/@vue/compiler-sfc@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/compiler-ssr

pnpm add https://pkg.pr.new/@vue/compiler-ssr@12825

npm i https://pkg.pr.new/@vue/compiler-ssr@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/reactivity

pnpm add https://pkg.pr.new/@vue/reactivity@12825

npm i https://pkg.pr.new/@vue/reactivity@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-core

pnpm add https://pkg.pr.new/@vue/runtime-core@12825

npm i https://pkg.pr.new/@vue/runtime-core@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/runtime-dom

pnpm add https://pkg.pr.new/@vue/runtime-dom@12825

npm i https://pkg.pr.new/@vue/runtime-dom@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/server-renderer

pnpm add https://pkg.pr.new/@vue/server-renderer@12825

npm i https://pkg.pr.new/@vue/server-renderer@12825

yarn add https://pkg.pr.new/@vue/[email protected]

@vue/shared

pnpm add https://pkg.pr.new/@vue/shared@12825

npm i https://pkg.pr.new/@vue/shared@12825

yarn add https://pkg.pr.new/@vue/[email protected]

vue

pnpm add https://pkg.pr.new/vue@12825

npm i https://pkg.pr.new/vue@12825

yarn add https://pkg.pr.new/[email protected]

@vue/compat

pnpm add https://pkg.pr.new/@vue/compat@12825

npm i https://pkg.pr.new/@vue/compat@12825

yarn add https://pkg.pr.new/@vue/[email protected]

commit: 4f8d128

[thmsfchtnr]

Hey whats the current status can this pr be merged?

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a test verifying child components aren't re-rendered when style props remain unchanged, and implements a new helper function in componentRenderUtils that compares prop values with special handling for style objects to prevent unnecessary component updates.

Changes

Cohort / File(s)	Summary
Test Addition packages/runtime-core/__tests__/rendererComponent.spec.ts	New test case "should not update child component if style is not changed" validates that child components avoid re-rendering when non-style props change while style props remain static.
Prop Comparison Logic packages/runtime-core/src/componentRenderUtils.ts	Introduces hasPropValueChanged() helper function with special-case handling for style objects using looseEqual, replacing direct prop comparisons in shouldUpdateComponent and hasPropsChanged. Extends imports to include isObject and looseEqual from @vue/shared.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Suggested reviewers

• Doctor-wu

Poem

🐰✨ A style unchanged, yet children dance no more!
With looseEqual care, we've balanced render's score—
Props compared with grace, no needless DOM replay,
The rabbit hops with joy, bugs fixed today! 🌟

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: preventing unnecessary child component updates when style props remain unchanged, which directly addresses issue #12826.
Linked Issues check	✅ Passed	The PR implements a fix preventing child component updates when style hasn't changed [#12826], achieving the stated objective through internal prop comparison logic.
Out of Scope Changes check	✅ Passed	All changes are scoped to fixing child component update logic: a new test case, an internal helper function for prop value comparison, and supporting imports from @vue/shared.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch edison/fix/12770

---

No actionable comments were generated in the recent review. 🎉

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[edison1105]

/ecosystem-ci run

[vue-bot]

📝 Ran ecosystem CI: Open

suite	result	latest scheduled
pinia	✅ success	✅ success
nuxt	✅ success	✅ success
test-utils	✅ success	✅ success
router	❌ failure	❌ failure
radix-vue	✅ success	✅ success
quasar	✅ success	✅ success
primevue	✅ success	✅ success
language-tools	✅ success	✅ success
vue-macros	✅ success	✅ success
vue-i18n	✅ success	✅ success
vant	✅ success	✅ success
vueuse	✅ success	✅ success
vue-simple-compiler	✅ success	✅ success
vitepress	✅ success	✅ success
vuetify	✅ success	✅ success
vite-plugin-vue	✅ success	✅ success