root
/
vue3-core
mirror of https://github.com/vuejs/core.git
1
0
Fork 0
Code Issues Actions 10 Packages Projects Releases Wiki Activity

fix: Revert "fix(Transition): handle KeepAlive child unmount in Transition out-in mode (#11778)" 

This reverts commit 3116553529.

close #11829
reopen #11775
This commit is contained in:
Evan You 2024-09-06 08:50:39 +08:00
parent 35c760f82f
commit 7e3b3bb2a1
No known key found for this signature in database
GPG Key ID: 00E9AB7A6704CE0A
4 changed files with 3 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/runtime-core/src/componentRenderUtils.ts
View File

@ -60,7 +60,6 @@ export function renderComponentRoot(
setupState,
ctx,
inheritAttrs,
isMounted,
} = instance
const prev = setCurrentRenderingInstance(instance)
@ -254,9 +253,7 @@ export function renderComponentRoot(
`that cannot be animated.`,
)
}
root.transition = isMounted
? vnode.component!.subTree.transition!
: vnode.transition
root.transition = vnode.transition
}
if (__DEV__ && setRoot) {

1
packages/runtime-core/src/components/BaseTransition.ts
View File

@ -227,7 +227,6 @@ const BaseTransitionImpl: ComponentOptions = {
if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
instance.update()
}
delete leavingHooks.afterLeave
}
return emptyPlaceholder(child)
} else if (mode === 'in-out' && innerChild.type !== Comment) {

2
packages/runtime-core/src/components/KeepAlive.ts
View File

@ -267,7 +267,7 @@ const KeepAliveImpl: ComponentOptions = {
pendingCacheKey = null
if (!slots.default) {
return (current = null)
return null
}
const children = slots.default()

171
packages/vue/__tests__/e2e/Transition.spec.ts
View File

@ -1427,11 +1427,9 @@ describe('e2e: Transition', () => {
},
E2E_TIMEOUT,
)
})
describe('transition with KeepAlive', () => {
test(
'unmount innerChild (out-in mode)',
'w/ KeepAlive + unmount innerChild',
async () => {
const unmountSpy = vi.fn()
await page().exposeFunction('unmountSpy', unmountSpy)
@ -1486,173 +1484,6 @@ describe('e2e: Transition', () => {
},
E2E_TIMEOUT,
)
// #11775
test(
'switch child then update include (out-in mode)',
async () => {
const onUpdatedSpyA = vi.fn()
const onUnmountedSpyC = vi.fn()
await page().exposeFunction('onUpdatedSpyA', onUpdatedSpyA)
await page().exposeFunction('onUnmountedSpyC', onUnmountedSpyC)
await page().evaluate(() => {
const { onUpdatedSpyA, onUnmountedSpyC } = window as any
const { createApp, ref, shallowRef, h, onUpdated, onUnmounted } = (
window as any
).Vue
createApp({
template: `
<div id="container">
<transition mode="out-in">
<KeepAlive :include="includeRef">
<component :is="current" />
</KeepAlive>
</transition>
</div>
<button id="switchToB" @click="switchToB">switchToB</button>
<button id="switchToC" @click="switchToC">switchToC</button>
<button id="switchToA" @click="switchToA">switchToA</button>
`,
components: {
CompA: {
name: 'CompA',
setup() {
onUpdated(onUpdatedSpyA)
return () => h('div', 'CompA')
},
},
CompB: {
name: 'CompB',
setup() {
return () => h('div', 'CompB')
},
},
CompC: {
name: 'CompC',
setup() {
onUnmounted(onUnmountedSpyC)
return () => h('div', 'CompC')
},
},
},
setup: () => {
const includeRef = ref(['CompA', 'CompB', 'CompC'])
const current = shallowRef('CompA')
const switchToB = () => (current.value = 'CompB')
const switchToC = () => (current.value = 'CompC')
const switchToA = () => {
current.value = 'CompA'
includeRef.value = ['CompA']
}
return { current, switchToB, switchToC, switchToA, includeRef }
},
}).mount('#app')
})
await transitionFinish()
expect(await html('#container')).toBe('<div>CompA</div>')
await click('#switchToB')
await nextTick()
await click('#switchToC')
await transitionFinish()
expect(await html('#container')).toBe('<div class="">CompC</div>')
await click('#switchToA')
await transitionFinish()
expect(await html('#container')).toBe('<div class="">CompA</div>')
// expect CompA only update once
expect(onUpdatedSpyA).toBeCalledTimes(1)
expect(onUnmountedSpyC).toBeCalledTimes(1)
},
E2E_TIMEOUT,
)
// #10827
test(
'switch and update child then update include (out-in mode)',
async () => {
const onUnmountedSpyB = vi.fn()
await page().exposeFunction('onUnmountedSpyB', onUnmountedSpyB)
await page().evaluate(() => {
const { onUnmountedSpyB } = window as any
const {
createApp,
ref,
shallowRef,
h,
provide,
inject,
onUnmounted,
} = (window as any).Vue
createApp({
template: `
<div id="container">
<transition name="test-anim" mode="out-in">
<KeepAlive :include="includeRef">
<component :is="current" />
</KeepAlive>
</transition>
</div>
<button id="switchToA" @click="switchToA">switchToA</button>
<button id="switchToB" @click="switchToB">switchToB</button>
`,
components: {
CompA: {
name: 'CompA',
setup() {
const current = inject('current')
return () => h('div', current.value)
},
},
CompB: {
name: 'CompB',
setup() {
const current = inject('current')
onUnmounted(onUnmountedSpyB)
return () => h('div', current.value)
},
},
},
setup: () => {
const includeRef = ref(['CompA'])
const current = shallowRef('CompA')
provide('current', current)
const switchToB = () => {
current.value = 'CompB'
includeRef.value = ['CompA', 'CompB']
}
const switchToA = () => {
current.value = 'CompA'
includeRef.value = ['CompA']
}
return { current, switchToB, switchToA, includeRef }
},
}).mount('#app')
})
await transitionFinish()
expect(await html('#container')).toBe('<div>CompA</div>')
await click('#switchToB')
await transitionFinish()
await transitionFinish()
expect(await html('#container')).toBe('<div class="">CompB</div>')
await click('#switchToA')
await transitionFinish()
await transitionFinish()
expect(await html('#container')).toBe('<div class="">CompA</div>')
expect(onUnmountedSpyB).toBeCalledTimes(1)
},
E2E_TIMEOUT,
)
})
describe('transition with Suspense', () => {