fix: add hydration mismatch checks for attrs

zh-lx · Jan 5, 2024 · d563f66 · d563f66
1 parent 4f67aa0
commit d563f66
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1454,6 +1454,9 @@ describe('SSR hydration', () => {
       mountWithHydration(`<textarea>foo</textarea>`, () =>
         h('textarea', { value: 'foo' }),
       )
+      mountWithHydration(`<textarea></textarea>`, () =>
+        h('textarea', { value: '' }),
+      )
       expect(`Hydration attribute mismatch`).not.toHaveBeenWarned()
 
       mountWithHydration(`<div></div>`, () => h('div', { id: 'foo' }))

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
@@ -739,15 +739,15 @@ function propHasMismatch(el: Element, key: string, clientValue: any): boolean {
   ) {
     actual = el.hasAttribute(key)
       ? el.getAttribute(key)
-      : el[key as keyof typeof el]
+      : key in el
         ? el[key as keyof typeof el]
-        : false
+        : ''
     expected = isBooleanAttr(key)
       ? includeBooleanAttr(clientValue)
         ? ''
         : false
       : clientValue == null
-        ? false
+        ? ''
         : String(clientValue)
     if (actual !== expected) {
       mismatchType = `attribute`