fix(keep-alive): reset keep alive flag when the component is removed from include (#11718)

close #11717
This commit is contained in:
linzhe 2024-08-29 10:41:19 +08:00 committed by GitHub
parent 64e1ca2657
commit 29c321bfd3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 54 additions and 0 deletions

View File

@ -1121,4 +1121,56 @@ describe('KeepAlive', () => {
expect(mountedB).toHaveBeenCalledTimes(1)
expect(unmountedB).toHaveBeenCalledTimes(0)
})
// #11717
test('remove component from include then switching child', async () => {
const About = {
name: 'About',
render() {
return h('h1', 'About')
},
}
const mountedHome = vi.fn()
const unmountedHome = vi.fn()
const activatedHome = vi.fn()
const deactivatedHome = vi.fn()
const Home = {
name: 'Home',
setup() {
onMounted(mountedHome)
onUnmounted(unmountedHome)
onDeactivated(deactivatedHome)
onActivated(activatedHome)
return () => {
h('h1', 'Home')
}
},
}
const activeViewName = ref('Home')
const cacheList = reactive(['Home'])
const App = createApp({
setup() {
return () => {
return [
h(
KeepAlive,
{
include: cacheList,
},
[activeViewName.value === 'Home' ? h(Home) : h(About)],
),
]
}
},
})
App.mount(nodeOps.createElement('div'))
expect(mountedHome).toHaveBeenCalledTimes(1)
expect(activatedHome).toHaveBeenCalledTimes(1)
cacheList.splice(0, 1)
await nextTick()
activeViewName.value = 'About'
await nextTick()
expect(deactivatedHome).toHaveBeenCalledTimes(0)
expect(unmountedHome).toHaveBeenCalledTimes(1)
})
})

View File

@ -310,6 +310,8 @@ const KeepAliveImpl: ComponentOptions = {
(include && (!name || !matches(include, name))) ||
(exclude && name && matches(exclude, name))
) {
// #11717
vnode.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
current = vnode
return rawVNode
}