fix(hydration): improve mismatch when client valut is null or undefin…

…ed (vuejs#10086)
yangxiuxiu1115 · Jan 12, 2024 · 08b60f5 · 08b60f5
1 parent bb6b7a2
commit 08b60f5
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1512,6 +1512,16 @@ describe('SSR hydration', () => {
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
     })
 
+    test('client value is null or undefined', () => {
+      mountWithHydration(`<div></div>`, () =>
+        h('div', { draggable: undefined }),
+      )
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+
+      mountWithHydration(`<input />`, () => h('input', { type: null }))
+      expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
+    })
+
     test('should not warn against object values', () => {
       mountWithHydration(`<input />`, () => h('input', { from: {} }))
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
@@ -758,6 +758,9 @@ function propHasMismatch(
     if (isBooleanAttr(key)) {
       actual = el.hasAttribute(key)
       expected = includeBooleanAttr(clientValue)
+    } else if (clientValue == null) {
+      actual = el.hasAttribute(key)
+      expected = false
     } else {
       if (el.hasAttribute(key)) {
         actual = el.getAttribute(key)