From 83e9a646e89d631b20ceb65423166e04e8dc02bb Mon Sep 17 00:00:00 2001 From: "Z.W.B" Date: Fri, 23 Oct 2020 19:42:00 +0800 Subject: [PATCH] Revert "fix(compiler-core): generate incremental keys for v-if/else-if/else chains (#1589)" This reverts commit 64c7b2f9cedae676ec26a7a8da4c109bc88b48f1. --- .../transforms/__snapshots__/vIf.spec.ts.snap | 40 ----------- .../__tests__/transforms/vIf.spec.ts | 71 +------------------ packages/compiler-core/src/transforms/vIf.ts | 17 +---- 3 files changed, 5 insertions(+), 123 deletions(-) diff --git a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap index def7f945a51..772898faacb 100644 --- a/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap +++ b/packages/compiler-core/__tests__/transforms/__snapshots__/vIf.spec.ts.snap @@ -14,46 +14,6 @@ return function render(_ctx, _cache) { }" `; -exports[`compiler: v-if codegen increasing key: v-if + v-else-if + v-else 1`] = ` -"const _Vue = Vue - -return function render(_ctx, _cache) { - with (_ctx) { - const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue - - return (_openBlock(), _createBlock(_Fragment, null, [ - ok - ? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) - : (_openBlock(), _createBlock(\\"p\\", { key: 1 })), - another - ? (_openBlock(), _createBlock(\\"div\\", { key: 2 })) - : orNot - ? (_openBlock(), _createBlock(\\"p\\", { key: 3 })) - : (_openBlock(), _createBlock(\\"p\\", { key: 4 })) - ], 64 /* STABLE_FRAGMENT */)) - } -}" -`; - -exports[`compiler: v-if codegen multiple v-if that are sibling nodes should have different keys 1`] = ` -"const _Vue = Vue - -return function render(_ctx, _cache) { - with (_ctx) { - const { createVNode: _createVNode, openBlock: _openBlock, createBlock: _createBlock, createCommentVNode: _createCommentVNode, Fragment: _Fragment } = _Vue - - return (_openBlock(), _createBlock(_Fragment, null, [ - ok - ? (_openBlock(), _createBlock(\\"div\\", { key: 0 })) - : _createCommentVNode(\\"v-if\\", true), - orNot - ? (_openBlock(), _createBlock(\\"p\\", { key: 1 })) - : _createCommentVNode(\\"v-if\\", true) - ], 64 /* STABLE_FRAGMENT */)) - } -}" -`; - exports[`compiler: v-if codegen template v-if 1`] = ` "const _Vue = Vue diff --git a/packages/compiler-core/__tests__/transforms/vIf.spec.ts b/packages/compiler-core/__tests__/transforms/vIf.spec.ts index f1b91cc4567..f3d0a0698f7 100644 --- a/packages/compiler-core/__tests__/transforms/vIf.spec.ts +++ b/packages/compiler-core/__tests__/transforms/vIf.spec.ts @@ -29,8 +29,7 @@ import { createObjectMatcher } from '../testUtils' function parseWithIfTransform( template: string, options: CompilerOptions = {}, - returnIndex: number = 0, - childrenLen: number = 1 + returnIndex: number = 0 ) { const ast = parse(template, options) transform(ast, { @@ -38,10 +37,8 @@ function parseWithIfTransform( ...options }) if (!options.onError) { - expect(ast.children.length).toBe(childrenLen) - for (let i = 0; i < childrenLen; i++) { - expect(ast.children[i].type).toBe(NodeTypes.IF) - } + expect(ast.children.length).toBe(1) + expect(ast.children[0].type).toBe(NodeTypes.IF) } return { root: ast, @@ -487,68 +484,6 @@ describe('compiler: v-if', () => { expect(generate(root).code).toMatchSnapshot() }) - test('multiple v-if that are sibling nodes should have different keys', () => { - const { root } = parseWithIfTransform( - `

`, - {}, - 0 /* returnIndex, just give the default value */, - 2 /* childrenLen */ - ) - - const ifNode = root.children[0] as IfNode & { - codegenNode: IfConditionalExpression - } - expect(ifNode.codegenNode.consequent).toMatchObject({ - tag: `"div"`, - props: createObjectMatcher({ key: `[0]` }) - }) - const ifNode2 = root.children[1] as IfNode & { - codegenNode: IfConditionalExpression - } - expect(ifNode2.codegenNode.consequent).toMatchObject({ - tag: `"p"`, - props: createObjectMatcher({ key: `[1]` }) - }) - expect(generate(root).code).toMatchSnapshot() - }) - - test('increasing key: v-if + v-else-if + v-else', () => { - const { root } = parseWithIfTransform( - `

`, - {}, - 0 /* returnIndex, just give the default value */, - 2 /* childrenLen */ - ) - const ifNode = root.children[0] as IfNode & { - codegenNode: IfConditionalExpression - } - expect(ifNode.codegenNode.consequent).toMatchObject({ - tag: `"div"`, - props: createObjectMatcher({ key: `[0]` }) - }) - expect(ifNode.codegenNode.alternate).toMatchObject({ - tag: `"p"`, - props: createObjectMatcher({ key: `[1]` }) - }) - const ifNode2 = root.children[1] as IfNode & { - codegenNode: IfConditionalExpression - } - expect(ifNode2.codegenNode.consequent).toMatchObject({ - tag: `"div"`, - props: createObjectMatcher({ key: `[2]` }) - }) - const branch = ifNode2.codegenNode.alternate as IfConditionalExpression - expect(branch.consequent).toMatchObject({ - tag: `"p"`, - props: createObjectMatcher({ key: `[3]` }) - }) - expect(branch.alternate).toMatchObject({ - tag: `"p"`, - props: createObjectMatcher({ key: `[4]` }) - }) - expect(generate(root).code).toMatchSnapshot() - }) - test('key injection (only v-bind)', () => { const { node: { codegenNode } diff --git a/packages/compiler-core/src/transforms/vIf.ts b/packages/compiler-core/src/transforms/vIf.ts index 76a79e53f21..4be6bc4b98d 100644 --- a/packages/compiler-core/src/transforms/vIf.ts +++ b/packages/compiler-core/src/transforms/vIf.ts @@ -39,26 +39,13 @@ export const transformIf = createStructuralDirectiveTransform( /^(if|else|else-if)$/, (node, dir, context) => { return processIf(node, dir, context, (ifNode, branch, isRoot) => { - // #1587: We need to dynamically increment the key based on the current - // node's sibling nodes, since chained v-if/else branches are - // rendered at the same depth - const siblings = context.parent!.children - let i = siblings.indexOf(ifNode) - let key = 0 - while (i-- >= 0) { - const sibling = siblings[i] - if (sibling && sibling.type === NodeTypes.IF) { - key += sibling.branches.length - } - } - // Exit callback. Complete the codegenNode when all children have been // transformed. return () => { if (isRoot) { ifNode.codegenNode = createCodegenNodeForBranch( branch, - key, + 0, context ) as IfConditionalExpression } else { @@ -66,7 +53,7 @@ export const transformIf = createStructuralDirectiveTransform( const parentCondition = getParentCondition(ifNode.codegenNode!) parentCondition.alternate = createCodegenNodeForBranch( branch, - key + ifNode.branches.length - 1, + ifNode.branches.length - 1, context ) }