root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 3 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') {
// 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.
actual = toClassSet(el.getAttribute('class') || '')
expected = toClassSet(normalizeClass(clientValue))
if (!isSetEqual(actual, expected)) {
actual = el.getAttribute('class')
expected = normalizeClass(clientValue)
if (!isSetEqual(toClassSet(actual || ''), toClassSet(expected))) {
mismatchType = mismatchKey = `class`
}
} else if (key === 'style') {
// style might be in different order, but that doesn't affect cascade
actual = toStyleMap(el.getAttribute('style') || '')
expected = toStyleMap(
isString(clientValue)
? clientValue
: stringifyStyle(normalizeStyle(clientValue)),
)
actual = el.getAttribute('style')
expected = isString(clientValue)
? clientValue
: stringifyStyle(normalizeStyle(clientValue))
const actualMap = toStyleMap(actual)
const expectedMap = toStyleMap(expected)
// If `v-show=false`, `display: 'none'` should be added to expected
if (vnode.dirs) {
for (const { dir, value } of vnode.dirs) {
// @ts-expect-error only vShow has this internal name
if (dir.name === 'show' && !value) {
expected.set('display', 'none')
expectedMap.set('display', 'none')
}
}
}
if (!isMapEqual(actual, expected)) {
if (!isMapEqual(actualMap, expectedMap)) {
mismatchType = mismatchKey = 'style'
}
} else if (