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

fix(hydration): fix class and style hydration mismatch message 

close #10067
This commit is contained in:
Evan You 2024-01-11 00:47:28 +08:00
parent 70ad4caad7
commit 5af3987291
1 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -725,29 +725,29 @@ function propHasMismatch(
if (key === 'class') { if (key === 'class') {
// classes might be in different order, but that doesn't affect cascade // classes might be in different order, but that doesn't affect cascade
// so we just need to check if the class lists contain the same classes. // so we just need to check if the class lists contain the same classes.
actual = toClassSet(el.getAttribute('class') || '') actual = el.getAttribute('class')
expected = toClassSet(normalizeClass(clientValue)) expected = normalizeClass(clientValue)
if (!isSetEqual(actual, expected)) { if (!isSetEqual(toClassSet(actual || ''), toClassSet(expected))) {
mismatchType = mismatchKey = `class` mismatchType = mismatchKey = `class`
} }
} else if (key === 'style') { } else if (key === 'style') {
// style might be in different order, but that doesn't affect cascade // style might be in different order, but that doesn't affect cascade
actual = toStyleMap(el.getAttribute('style') || '') actual = el.getAttribute('style')
expected = toStyleMap( expected = isString(clientValue)
isString(clientValue) ? clientValue
? clientValue : stringifyStyle(normalizeStyle(clientValue))
: stringifyStyle(normalizeStyle(clientValue)), const actualMap = toStyleMap(actual)
) const expectedMap = toStyleMap(expected)
// If `v-show=false`, `display: 'none'` should be added to expected // If `v-show=false`, `display: 'none'` should be added to expected
if (vnode.dirs) { if (vnode.dirs) {
for (const { dir, value } of vnode.dirs) { for (const { dir, value } of vnode.dirs) {
// @ts-expect-error only vShow has this internal name // @ts-expect-error only vShow has this internal name
if (dir.name === 'show' && !value) { if (dir.name === 'show' && !value) {
expected.set('display', 'none') expectedMap.set('display', 'none')
} }
} }
} }
if (!isMapEqual(actual, expected)) { if (!isMapEqual(actualMap, expectedMap)) {
mismatchType = mismatchKey = 'style' mismatchType = mismatchKey = 'style'
} }
} else if ( } else if (