fix(hydration): force patch dynamic props when hydrating

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

@@ -2173,5 +2173,30 @@ describe('SSR hydration', () => {
       )
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
     })
+
+    // #9033
+    test('force patch dynamic props when hydrating', () => {
+      const timestamp = Date.now()
+      let timestampCur = 0
+      const { container } = mountWithHydration(
+        `<div><div>${timestamp}</div></div>`,
+        () => {
+          timestampCur = Date.now()
+          return (
+            openBlock(),
+            createElementBlock('div', null, [
+              createElementVNode(
+                'div',
+                { innerHTML: timestampCur },
+                null,
+                8 /* PROPS */,
+                ['innerHTML'],
+              ),
+            ])
+          )
+        },
+      )
+      expect(container.innerHTML).toBe(`<div><div>${timestampCur}</div></div>`)
+    })
   })
 })

packages/runtime-core/src/hydration.ts

@@ -369,11 +369,21 @@ export function createHydrationFunctions(
     optimized: boolean,
   ) => {
     optimized = optimized || !!vnode.dynamicChildren
-    const { type, props, patchFlag, shapeFlag, dirs, transition } = vnode
+    const {
+      type,
+      dynamicProps,
+      props,
+      patchFlag,
+      shapeFlag,
+      dirs,
+      transition,
+    } = vnode
     // #4006 for form elements with non-string v-model value bindings
     // e.g. <option :value="obj">, <input type="checkbox" :true-value="1">
     // #7476 <input indeterminate>
-    const forcePatch = type === 'input' || type === 'option'
+    // #9033 force patch dynamic props when hydrating
+    // e.g. <div v-html="timestamp" /> & (let timestamp = Date.now();)
+    const forcePatch = type === 'input' || type === 'option' || dynamicProps
     // skip props & children if this is hoisted static nodes
     // #5405 in dev, always hydrate children for HMR
     if (__DEV__ || forcePatch || patchFlag !== PatchFlags.CACHED) {
@@ -483,7 +493,8 @@ export function createHydrationFunctions(
               (isOn(key) && !isReservedProp(key)) ||
               // force hydrate v-bind with .prop modifiers
               key[0] === '.' ||
-              isCustomElement
+              isCustomElement ||
+              (dynamicProps && dynamicProps.includes(key))
             ) {
               patchProp(el, key, null, props[key], undefined, parentComponent)
             }