fix(hydration): force patch dynamic props when hydrating

[baiwusanyu-c]

close: #9033
The same code is executed on the client and the server, but some dynamic props may be inconsistent between the two runs (such as timestamps)， I think they should always be consistent with the client

Summary by CodeRabbit

• Bug Fixes

  • Improved hydration behavior so dynamic properties are applied correctly during page load, even when server-rendered content differs.
  • Hydration now updates only the explicitly dynamic attributes for an element, reducing unexpected changes to other server-provided values.

• Tests

  • Added coverage for dynamic prop hydration and selective attribute patching.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	106 kB (+45 B)	40.2 kB (+27 B)	36.1 kB (+41 B)
vue.global.prod.js	165 kB (+45 B)	60.2 kB (+23 B)	53.5 kB (+20 B)

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	19 kB	17.4 kB
createApp	56.9 kB	22 kB	20.1 kB
createSSRApp	61.2 kB (+45 B)	23.8 kB (+30 B)	21.7 kB (+15 B)
defineCustomElement	63.1 kB	23.9 kB	21.8 kB
overall	71.7 kB	27.4 kB	25 kB

[nobunobu]

up

[pkg-pr-new]

Open in StackBlitz

@vue/compiler-core

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

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

yarn add https://pkg.pr.new/@vue/compiler-core@9083.tgz

@vue/compiler-dom

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

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

yarn add https://pkg.pr.new/@vue/compiler-dom@9083.tgz

@vue/compiler-sfc

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

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

yarn add https://pkg.pr.new/@vue/compiler-sfc@9083.tgz

@vue/compiler-ssr

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

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

yarn add https://pkg.pr.new/@vue/compiler-ssr@9083.tgz

@vue/reactivity

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

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

yarn add https://pkg.pr.new/@vue/reactivity@9083.tgz

@vue/runtime-core

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

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

yarn add https://pkg.pr.new/@vue/runtime-core@9083.tgz

@vue/runtime-dom

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

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

yarn add https://pkg.pr.new/@vue/runtime-dom@9083.tgz

@vue/server-renderer

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

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

yarn add https://pkg.pr.new/@vue/server-renderer@9083.tgz

@vue/shared

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

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

yarn add https://pkg.pr.new/@vue/shared@9083.tgz

vue

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

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

yarn add https://pkg.pr.new/vue@9083.tgz

@vue/compat

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

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

yarn add https://pkg.pr.new/@vue/compat@9083.tgz

commit: b922529

[coderabbitai]

📝 Walkthrough

Walkthrough

Hydration now considers vnode dynamic props when deciding whether to patch server-rendered elements, and it only applies prop updates for keys marked dynamic. Tests cover production innerHTML hydration and selective patching of id while leaving value unchanged.

Changes

Hydration dynamic-prop patching

Layer / File(s)	Summary
Hydration prop patching packages/runtime-core/src/hydration.ts	hydrateElement now treats dynamicProps as a trigger to hydrate props and children, and patchProp is called for keys listed in dynamicProps.
Hydration test coverage packages/runtime-core/__tests__/hydration.spec.ts	Adds coverage for production innerHTML hydration and for patching only the dynamic id prop while preserving the server value.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

scope:hydration, 🔨 p3-minor-bug`

Suggested reviewers

• Doctor-wu

Poem

A bunny hopped through hydration’s glow 🐇
Marked props twinkled in a tidy row
id leapt forward, value stayed still
innerHTML hopped to the client’s will
Snip-snap, the server leaves didn’t snarl the show

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: forcing hydration to patch dynamic props.
Linked Issues check	✅ Passed	The hydration logic and tests address the reported dynamic prop mismatch behind #9033, including v-html/innerHTML behavior.
Out of Scope Changes check	✅ Passed	The diff stays focused on hydration behavior and related tests, with no unrelated feature or refactor changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[edison1105]

/ecosystem-ci run

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

packages/runtime-core/__tests__/hydration.spec.ts (1)

2676-2722: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win

Add a direct img src hydration regression test for the reported case.

Given the linked objective explicitly calls out img src, adding one focused assertion for dynamic src patching would lock coverage to the original bug report.

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/runtime-core/__tests__/hydration.spec.ts` around lines 2676 - 2722,
Add a focused hydration regression test for the reported img src case alongside
the existing force-patch dynamic props coverage. In the hydration spec, extend
the test area around mountWithHydration/createVNode to cover an img element with
a declared dynamic src prop, then assert the hydrated DOM updates src from
server to client while leaving unrelated props untouched. Use the existing
hydration helpers and PatchFlags.PROPS pattern so the new test directly
exercises the same path as the current dynamic-props tests.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 2679-2699: The hydration test mutates the global __DEV__ flag and
currently restores it to a hardcoded true, which can leak state if the prior
value was different. In the hydration.spec.ts test around mountWithHydration,
capture the original __DEV__ value before setting it to false, then restore that
saved value in the finally block instead of assuming true. Keep the change
localized to this test so the global state is properly isolated.

---

Nitpick comments:
In `@packages/runtime-core/__tests__/hydration.spec.ts`:
- Around line 2676-2722: Add a focused hydration regression test for the
reported img src case alongside the existing force-patch dynamic props coverage.
In the hydration spec, extend the test area around
mountWithHydration/createVNode to cover an img element with a declared dynamic
src prop, then assert the hydrated DOM updates src from server to client while
leaving unrelated props untouched. Use the existing hydration helpers and
PatchFlags.PROPS pattern so the new test directly exercises the same path as the
current dynamic-props tests.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f3687596-9029-488d-8ec5-941ed8007ff4

📥 Commits

Reviewing files that changed from the base of the PR and between 325eb1d and b922529.

📒 Files selected for processing (2)

• packages/runtime-core/__tests__/hydration.spec.ts
• packages/runtime-core/src/hydration.ts

[vue-bot]

📝 Ran ecosystem CI: Open

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