root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 5 Packages Projects Releases Wiki Activity

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

This commit is contained in:
zhoulixiang 2024-01-12 17:50:26 +08:00 committed by GitHub
parent bb6b7a297e
commit 08b60f5d0d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/runtime-core/__tests__/hydration.spec.ts
View File

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

3
packages/runtime-core/src/hydration.ts
View File

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