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

vuejs · Jan 11, 2024 · 3907c87 · 3907c87
1 parent 9636357
commit 3907c87
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -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`