From: Evan You <yyx990803@gmail.com>
Date: Fri, 27 Nov 2020 17:35:00 +0000 (-0500)
Subject: fix(compiler-ssr): should not render key/ref bindings in ssr
X-Git-Tag: v3.0.4~41
X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=5b6266284da01008e2f68ed353a622adc5704261;p=thirdparty%2Fvuejs%2Fcore.git

fix(compiler-ssr): should not render key/ref bindings in ssr
---

diff --git a/packages/compiler-ssr/__tests__/ssrElement.spec.ts b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
index 50b7060a58..1d3a2d53d1 100644
--- a/packages/compiler-ssr/__tests__/ssrElement.spec.ts
+++ b/packages/compiler-ssr/__tests__/ssrElement.spec.ts
@@ -94,6 +94,18 @@ describe('ssr: element', () => {
       ).toMatchInlineSnapshot(`"\`<div id=\\"foo\\" class=\\"bar\\"></div>\`"`)
     })
 
+    test('ignore static key/ref', () => {
+      expect(
+        getCompiledString(`<div key="1" ref="el"></div>`)
+      ).toMatchInlineSnapshot(`"\`<div></div>\`"`)
+    })
+
+    test('ignore v-bind key/ref', () => {
+      expect(
+        getCompiledString(`<div :key="1" :ref="el"></div>`)
+      ).toMatchInlineSnapshot(`"\`<div></div>\`"`)
+    })
+
     test('v-bind:class', () => {
       expect(getCompiledString(`<div id="foo" :class="bar"></div>`))
         .toMatchInlineSnapshot(`
@@ -139,7 +151,7 @@ describe('ssr: element', () => {
       `)
     })
 
-    test('v-bind:key (boolean)', () => {
+    test('v-bind:arg (boolean)', () => {
       expect(getCompiledString(`<input type="checkbox" :checked="checked">`))
         .toMatchInlineSnapshot(`
         "\`<input type=\\"checkbox\\"\${
@@ -148,7 +160,7 @@ describe('ssr: element', () => {
       `)
     })
 
-    test('v-bind:key (non-boolean)', () => {
+    test('v-bind:arg (non-boolean)', () => {
       expect(getCompiledString(`<div :id="id" class="bar"></div>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
@@ -157,7 +169,7 @@ describe('ssr: element', () => {
       `)
     })
 
-    test('v-bind:[key]', () => {
+    test('v-bind:[arg]', () => {
       expect(getCompiledString(`<div v-bind:[key]="value"></div>`))
         .toMatchInlineSnapshot(`
         "\`<div\${
diff --git a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
index e036671fcd..cfc02530fa 100644
--- a/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
+++ b/packages/compiler-ssr/src/transforms/ssrTransformElement.ts
@@ -198,6 +198,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
               if (isStaticExp(key)) {
                 let attrName = key.content
                 // static key attr
+                if (attrName === 'key' || attrName === 'ref') {
+                  continue
+                }
                 if (attrName === 'class') {
                   openTag.push(
                     ` class="`,
@@ -274,6 +277,9 @@ export const ssrTransformElement: NodeTransform = (node, context) => {
         if (node.tag === 'textarea' && prop.name === 'value' && prop.value) {
           rawChildrenMap.set(node, escapeHtml(prop.value.content))
         } else if (!hasDynamicVBind) {
+          if (prop.name === 'key' || prop.name === 'ref') {
+            continue
+          }
           // static prop
           if (prop.name === 'class' && prop.value) {
             staticClassBinding = JSON.stringify(prop.value.content)