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

vuejs · Nov 27, 2020 · 5b62662 · 5b62662
1 parent a5d6f80
commit 5b62662
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -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)