fix(hydration): improve mismatch when client valut is null or undefined (#10086)

Author: zh-lx

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()

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)