fix(compiler-ssr): ensure v-show has a higher priority in SSR (#12171)

linzhe141 · web-flow · commit 836b82976ffb · 2025-09-24T17:06:03.000+08:00
close #12162
diff --git a/packages/compiler-ssr/__tests__/ssrVShow.spec.ts b/packages/compiler-ssr/__tests__/ssrVShow.spec.ts
@@ -11,9 +11,9 @@ describe('ssr: v-show', () => {
       const { ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
 
       return function ssrRender(_ctx, _push, _parent, _attrs) {
-        _push(\`<div\${_ssrRenderAttrs(_mergeProps({
+        _push(\`<div\${_ssrRenderAttrs(_mergeProps(_attrs, {
           style: (_ctx.foo) ? null : { display: "none" }
-        }, _attrs))}></div>\`)
+        }))}></div>\`)
       }"
     `)
   })
@@ -92,6 +92,24 @@ describe('ssr: v-show', () => {
     `)
   })
 
+  test('with style + display', () => {
+    expect(compileWithWrapper(`<div v-show="foo" style="display:flex" />`).code)
+      .toMatchInlineSnapshot(`
+        "const { ssrRenderStyle: _ssrRenderStyle, ssrRenderAttrs: _ssrRenderAttrs } = require("vue/server-renderer")
+
+        return function ssrRender(_ctx, _push, _parent, _attrs) {
+          _push(\`<div\${
+            _ssrRenderAttrs(_attrs)
+          }><div style="\${
+            _ssrRenderStyle([
+              {"display":"flex"},
+              (_ctx.foo) ? null : { display: "none" }
+            ])
+          }"></div></div>\`)
+        }"
+      `)
+  })
+
   test('with v-bind', () => {
     expect(
       compileWithWrapper(
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -88,6 +88,17 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
     const hasCustomDir = node.props.some(
       p => p.type === NodeTypes.DIRECTIVE && !isBuiltInDirective(p.name),
     )
+
+    // v-show has a higher priority in ssr
+    const vShowPropIndex = node.props.findIndex(
+      i => i.type === NodeTypes.DIRECTIVE && i.name === 'show',
+    )
+    if (vShowPropIndex !== -1) {
+      const vShowProp = node.props[vShowPropIndex]
+      node.props.splice(vShowPropIndex, 1)
+      node.props.push(vShowProp)
+    }
+
     const needMergeProps = hasDynamicVBind || hasCustomDir
     if (needMergeProps) {
       const { props, directives } = buildProps(
