Skip to content

Commit 29c321b

Browse files
authored
fix(keep-alive): reset keep alive flag when the component is removed from include (#11718)
close #11717
1 parent 64e1ca2 commit 29c321b

File tree

2 files changed

+54
-0
lines changed

2 files changed

+54
-0
lines changed

Diff for: packages/runtime-core/__tests__/components/KeepAlive.spec.ts

+52
Original file line numberDiff line numberDiff line change
@@ -1121,4 +1121,56 @@ describe('KeepAlive', () => {
11211121
expect(mountedB).toHaveBeenCalledTimes(1)
11221122
expect(unmountedB).toHaveBeenCalledTimes(0)
11231123
})
1124+
1125+
// #11717
1126+
test('remove component from include then switching child', async () => {
1127+
const About = {
1128+
name: 'About',
1129+
render() {
1130+
return h('h1', 'About')
1131+
},
1132+
}
1133+
const mountedHome = vi.fn()
1134+
const unmountedHome = vi.fn()
1135+
const activatedHome = vi.fn()
1136+
const deactivatedHome = vi.fn()
1137+
const Home = {
1138+
name: 'Home',
1139+
setup() {
1140+
onMounted(mountedHome)
1141+
onUnmounted(unmountedHome)
1142+
onDeactivated(deactivatedHome)
1143+
onActivated(activatedHome)
1144+
return () => {
1145+
h('h1', 'Home')
1146+
}
1147+
},
1148+
}
1149+
const activeViewName = ref('Home')
1150+
const cacheList = reactive(['Home'])
1151+
const App = createApp({
1152+
setup() {
1153+
return () => {
1154+
return [
1155+
h(
1156+
KeepAlive,
1157+
{
1158+
include: cacheList,
1159+
},
1160+
[activeViewName.value === 'Home' ? h(Home) : h(About)],
1161+
),
1162+
]
1163+
}
1164+
},
1165+
})
1166+
App.mount(nodeOps.createElement('div'))
1167+
expect(mountedHome).toHaveBeenCalledTimes(1)
1168+
expect(activatedHome).toHaveBeenCalledTimes(1)
1169+
cacheList.splice(0, 1)
1170+
await nextTick()
1171+
activeViewName.value = 'About'
1172+
await nextTick()
1173+
expect(deactivatedHome).toHaveBeenCalledTimes(0)
1174+
expect(unmountedHome).toHaveBeenCalledTimes(1)
1175+
})
11241176
})

Diff for: packages/runtime-core/src/components/KeepAlive.ts

+2
Original file line numberDiff line numberDiff line change
@@ -310,6 +310,8 @@ const KeepAliveImpl: ComponentOptions = {
310310
(include && (!name || !matches(include, name))) ||
311311
(exclude && name && matches(exclude, name))
312312
) {
313+
// #11717
314+
vnode.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
313315
current = vnode
314316
return rawVNode
315317
}

0 commit comments

Comments
 (0)