fix(compiler-vapor): always keyed if fragment when the branch can change

packages/compiler-vapor/__tests__/transforms/__snapshots__/TransformTransition.spec.ts.snap

@@ -56,7 +56,7 @@ export function render(_ctx) {
         }, () => {
           const n13 = t1()
           return n13
-        })
+        }, null, 2)
         return n14
       }, null, 1), null, 0)
       return [n0, n3, n7]

packages/compiler-vapor/__tests__/transforms/__snapshots__/logicalIndex.spec.ts.snap

@@ -340,7 +340,7 @@ export function render(_ctx) {
   }, () => {
     const n5 = t1()
     return n5
-  })
+  }, null, 0)
   _setInsertionState(n7, null, 2, true)
   const n6 = _createComponentWithFallback(_component_Comp2)
   return n7
@@ -365,7 +365,7 @@ export function render(_ctx) {
   }, () => {
     const n5 = t1()
     return n5
-  })
+  }, null, 0)
   return n6
 }"
 `;
@@ -386,7 +386,7 @@ export function render(_ctx) {
   }, () => {
     const n4 = t1()
     return n4
-  })
+  }, null, 0)
   return n6
 }"
 `;
@@ -411,7 +411,7 @@ export function render(_ctx) {
   }, () => {
     const n6 = t2()
     return n6
-  }))
+  }, null, 1), null, 0)
   return n8
 }"
 `;
@@ -431,7 +431,7 @@ export function render(_ctx) {
   }, () => {
     const n4 = t1()
     return n4
-  })
+  }, null, 0)
   return n5
 }"
 `;
@@ -452,7 +452,7 @@ export function render(_ctx) {
   }, () => {
     const n4 = t1()
     return n4
-  })
+  }, null, 0)
   _setInsertionState(n6, null, 2, true)
   const n5 = _createComponentWithFallback(_component_Comp)
   return n6
@@ -474,7 +474,7 @@ export function render(_ctx) {
   }, () => {
     const n4 = t1()
     return n4
-  })
+  }, null, 0)
   return n5
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vIf.spec.ts.snap

@@ -36,7 +36,7 @@ export function render(_ctx) {
     const n10 = t3()
     const n11 = t4()
     return [n10, n11]
-  }))
+  }, null, 1), null, 0)
   const n13 = t5()
   const x13 = _txt(n13)
   _renderEffect(() => _setText(x13, _toDisplayString(_ctx.text)))
@@ -87,7 +87,7 @@ export function render(_ctx) {
   }, () => _createIf(() => (_ctx.bar), () => {
     const n4 = t1()
     return n4
-  }))
+  }), null, 0)
   const n6 = _createIf(() => (_ctx.baz), () => {
     const n8 = t2()
     return n8
@@ -185,7 +185,7 @@ export function render(_ctx) {
   }, () => {
     const n5 = t2()
     return n5
-  })
+  }, null, 0)
   return n0
 }"
 `;
@@ -221,7 +221,7 @@ export function render(_ctx) {
   }, () => {
     const n4 = t1()
     return n4
-  })
+  }, null, 0)
   return n0
 }"
 `;
@@ -245,7 +245,7 @@ export function render(_ctx) {
   }, () => {
     const n10 = t2()
     return n10
-  }, true)))
+  }, true, 2), null, 1), null, 0)
   return n0
 }"
 `;
@@ -262,7 +262,7 @@ export function render(_ctx) {
   }, () => _createIf(() => (_ctx.orNot), () => {
     const n4 = t1()
     return n4
-  }))
+  }), null, 0)
   return n0
 }"
 `;
@@ -288,7 +288,7 @@ export function render(_ctx) {
   }, () => {
     const n7 = t2()
     return n7
-  })
+  }, null, 1)
   return n8
 }"
 `;
@@ -306,7 +306,7 @@ export function render(_ctx) {
   }, () => _createIf(() => (_ctx.bar), () => {
     const n4 = t1()
     return n4
-  }))
+  }), null, 0)
   const n6 = t2()
   return [n0, n6]
 }"

packages/compiler-vapor/__tests__/transforms/__snapshots__/vOnce.spec.ts.snap

@@ -110,7 +110,7 @@ export function render(_ctx) {
   }, () => {
     const n4 = t1()
     return n4
-  }, true)
+  }, true, 0)
   return n0
 }"
 `;

packages/compiler-vapor/__tests__/transforms/__snapshots__/vSlot.spec.ts.snap

@@ -375,7 +375,7 @@ export function render(_ctx) {
   }, () => {
     const n5 = _createComponentWithFallback(_component_Bar)
     return n5
-  }, true)
+  }, true, 0)
   return n6
 }"
 `;
@@ -791,7 +791,7 @@ export function render(_ctx) {
       }, () => {
         const n4 = t1()
         return n4
-      })
+      }, null, 0)
       return n0
     }
   }, true)

packages/compiler-vapor/src/generators/if.ts

@@ -38,7 +38,8 @@ export function genIf(
       positiveArg,
       negativeArg,
       once && 'true',
-      // index is only used when the branch can change in Transition
+      // index is only used when the branch can change
+      // for transition keys and keep-alive caching
       index !== undefined && negative && String(index),
     ),
   )

packages/compiler-vapor/src/transforms/vIf.ts

@@ -18,7 +18,7 @@ import {
 import { extend } from '@vue/shared'
 import { newBlock, wrapTemplate } from './utils'
 import { getSiblingIf } from './transformComment'
-import { isInTransition, isStaticExpression } from '../utils'
+import { isStaticExpression } from '../utils'
 
 export const transformVIf: NodeTransform = createStructuralDirectiveTransform(
   ['if', 'else', 'else-if'],
@@ -51,7 +51,7 @@ export function processIf(
         id,
         condition: dir.exp!,
         positive: branch,
-        index: isInTransition(context) ? context.root.nextIfIndex() : undefined,
+        index: context.root.nextIfIndex(),
         once:
           context.inVOnce ||
           isStaticExpression(dir.exp!, context.options.bindingMetadata),
@@ -119,7 +119,7 @@ export function processIf(
         id: -1,
         condition: dir.exp!,
         positive: branch,
-        index: isInTransition(context) ? context.root.nextIfIndex() : undefined,
+        index: context.root.nextIfIndex(),
         once:
           context.inVOnce ||
           isStaticExpression(dir.exp!, context.options.bindingMetadata),