fix: add display: none for vShow: false in hydration mismatch

zh-lx · Jan 6, 2024 · 3e6103a · 3e6103a
1 parent cd90002
commit 3e6103a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 15 deletions.
diff --git a/packages/runtime-core/__tests__/hydration.spec.ts b/packages/runtime-core/__tests__/hydration.spec.ts
@@ -1435,7 +1435,7 @@ describe('SSR hydration', () => {
         `<div style="color:red; font-size: 12px;"></div>`,
         () => h('div', { style: `font-size: 12px; color:red;` }),
       )
-      mountWithHydration(`<div style="color:red;"></div>`, () =>
+      mountWithHydration(`<div style="color:red;display:none;"></div>`, () =>
         withDirectives(createVNode('div', { style: 'color: red' }, ''), [
           [vShow, false],
         ]),
@@ -1445,6 +1445,12 @@ describe('SSR hydration', () => {
         h('div', { style: { color: 'green' } }),
       )
       expect(`Hydration style mismatch`).toHaveBeenWarned()
+      mountWithHydration(`<div style="color:red;"></div>`, () =>
+        withDirectives(createVNode('div', { style: 'color: red' }, ''), [
+          [vShow, false],
+        ]),
+      )
+      expect(`Hydration style mismatch`).toHaveBeenWarnedTimes(2)
     })
 
     test('attr mismatch', () => {

diff --git a/packages/runtime-core/src/hydration.ts b/packages/runtime-core/src/hydration.ts
@@ -11,7 +11,7 @@ import {
   normalizeVNode,
 } from './vnode'
 import { flushPostFlushCbs } from './scheduler'
-import type { ComponentInternalInstance } from './component'
+import type { ComponentInternalInstance, Data } from './component'
 import { invokeDirectiveHook } from './directives'
 import { warn } from './warning'
 import {
@@ -448,15 +448,7 @@ export function createHydrationFunctions(
         ) {
           for (const key in props) {
             // check hydration mismatch
-            if (
-              __DEV__ &&
-              propHasMismatch(
-                el,
-                key,
-                props[key],
-                props.vShow ?? props['v-show'],
-              )
-            ) {
+            if (__DEV__ && propHasMismatch(el, key, props[key], vnode)) {
               hasMismatch = true
             }
             if (
@@ -724,7 +716,7 @@ function propHasMismatch(
   el: Element,
   key: string,
   clientValue: any,
-  vShow: boolean,
+  vnode: VNode,
 ): boolean {
   let mismatchType: string | undefined
   let mismatchKey: string | undefined
@@ -745,9 +737,17 @@ function propHasMismatch(
         ? clientValue
         : stringifyStyle(normalizeStyle(clientValue)),
     )
-    if (vShow === false) {
-      expected.set('display', 'false')
-    }
+    // When there is a `vShow:false` directive, should add `display: 'none'` to expected
+    ;(vnode.dirs || []).forEach(_dir => {
+      if (_dir.dir.getSSRProps && _dir.dir.getSSRProps(_dir, vnode)) {
+        const { style = {} } = _dir.dir.getSSRProps(_dir, vnode) as Data
+        if (style) {
+          for (let key in style) {
+            expected.set(key, style[key as keyof typeof style])
+          }
+        }
+      }
+    })
     if (!isMapEqual(actual, expected)) {
       mismatchType = mismatchKey = 'style'
     }