fix(hydration): should not warn on falsy bindings of non-property keys

diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
index 17d7b8dbcee30f106a2a12eb89872fce15beee15..3b2bdbf35c0894afe3ebc45238efac066b473aa0 100644 (file)
--- a/packages/runtime-core/__tests__/hydration.spec.ts
+++ b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1516,5 +1516,10 @@ describe('SSR hydration', () => {
       mountWithHydration(`<input />`, () => h('input', { from: {} }))
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
     })
+
+    test('should not warn on falsy bindings of non-property keys', () => {
+      mountWithHydration(`<button />`, () => h('button', { href: undefined }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
   })
 })

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
index 4df4eecece93d5cdf6cfe56289940880c380f78e..8ac4fbb75f7852e525976f31c6a01ce4481004dd 100644 (file)
--- a/packages/runtime-core/src/hydration.ts
+++ b/packages/runtime-core/src/hydration.ts
@@ -759,18 +759,18 @@ function propHasMismatch(
       actual = el.hasAttribute(key)
       expected = includeBooleanAttr(clientValue)
     } else {
-      // #10000 some attrs such as textarea.value can't be get by `hasAttribute`
       if (el.hasAttribute(key)) {
         actual = el.getAttribute(key)
-      } else if (key in el) {
+      } else {
+        // #10000 some attrs such as textarea.value can't be retrieved by `hasAttribute`
         const serverValue = el[key as keyof typeof el]
-        if (!isObject(serverValue)) {
-          actual = serverValue == null ? '' : String(serverValue)
-        }
-      }
-      if (!isObject(clientValue)) {
-        expected = clientValue == null ? '' : String(clientValue)
+        actual =
+          isObject(serverValue) || serverValue == null
+            ? ''
+            : String(serverValue)
       }
+      expected =
+        isObject(clientValue) || clientValue == null ? '' : String(clientValue)
     }
     if (actual !== expected) {
       mismatchType = `attribute`