mirror of https://github.com/vuejs/core.git
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:
parent
35c760f82f
commit
7e3b3bb2a1
|
@ -60,7 +60,6 @@ export function renderComponentRoot(
|
||||||
setupState,
|
setupState,
|
||||||
ctx,
|
ctx,
|
||||||
inheritAttrs,
|
inheritAttrs,
|
||||||
isMounted,
|
|
||||||
} = instance
|
} = instance
|
||||||
const prev = setCurrentRenderingInstance(instance)
|
const prev = setCurrentRenderingInstance(instance)
|
||||||
|
|
||||||
|
@ -254,9 +253,7 @@ export function renderComponentRoot(
|
||||||
`that cannot be animated.`,
|
`that cannot be animated.`,
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
root.transition = isMounted
|
root.transition = vnode.transition
|
||||||
? vnode.component!.subTree.transition!
|
|
||||||
: vnode.transition
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (__DEV__ && setRoot) {
|
if (__DEV__ && setRoot) {
|
||||||
|
|
|
@ -227,7 +227,6 @@ const BaseTransitionImpl: ComponentOptions = {
|
||||||
if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
|
if (!(instance.job.flags! & SchedulerJobFlags.DISPOSED)) {
|
||||||
instance.update()
|
instance.update()
|
||||||
}
|
}
|
||||||
delete leavingHooks.afterLeave
|
|
||||||
}
|
}
|
||||||
return emptyPlaceholder(child)
|
return emptyPlaceholder(child)
|
||||||
} else if (mode === 'in-out' && innerChild.type !== Comment) {
|
} else if (mode === 'in-out' && innerChild.type !== Comment) {
|
||||||
|
|
|
@ -267,7 +267,7 @@ const KeepAliveImpl: ComponentOptions = {
|
||||||
pendingCacheKey = null
|
pendingCacheKey = null
|
||||||
|
|
||||||
if (!slots.default) {
|
if (!slots.default) {
|
||||||
return (current = null)
|
return null
|
||||||
}
|
}
|
||||||
|
|
||||||
const children = slots.default()
|
const children = slots.default()
|
||||||
|
|
|
@ -1427,11 +1427,9 @@ describe('e2e: Transition', () => {
|
||||||
},
|
},
|
||||||
E2E_TIMEOUT,
|
E2E_TIMEOUT,
|
||||||
)
|
)
|
||||||
})
|
|
||||||
|
|
||||||
describe('transition with KeepAlive', () => {
|
|
||||||
test(
|
test(
|
||||||
'unmount innerChild (out-in mode)',
|
'w/ KeepAlive + unmount innerChild',
|
||||||
async () => {
|
async () => {
|
||||||
const unmountSpy = vi.fn()
|
const unmountSpy = vi.fn()
|
||||||
await page().exposeFunction('unmountSpy', unmountSpy)
|
await page().exposeFunction('unmountSpy', unmountSpy)
|
||||||
|
@ -1486,173 +1484,6 @@ describe('e2e: Transition', () => {
|
||||||
},
|
},
|
||||||
E2E_TIMEOUT,
|
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', () => {
|
describe('transition with Suspense', () => {
|
||||||
|
|
Loading…
Reference in New Issue