fix(runtime-core): fix render function + optimized slot edge case (#3523)

fix #2893

Manually rendering the optimized slots should allow subsequent updates to exit the optimization mode correctly
This commit is contained in:
HcySunYang
2021-04-02 07:28:58 +08:00
committed by GitHub
parent c90fb945f4
commit 995d76bd12
3 changed files with 71 additions and 4 deletions

View File

@@ -15,7 +15,10 @@ import {
defineComponent,
withCtx,
renderSlot,
onBeforeUnmount
onBeforeUnmount,
createTextVNode,
SetupContext,
createApp
} from '@vue/runtime-test'
import { PatchFlags, SlotFlags } from '@vue/shared'
@@ -517,4 +520,60 @@ describe('renderer: optimized mode', () => {
expect(spyA).toHaveBeenCalledTimes(1)
expect(spyB).toHaveBeenCalledTimes(1)
})
// #2893
test('manually rendering the optimized slots should allow subsequent updates to exit the optimized mode correctly', async () => {
const state = ref(0)
const CompA = {
setup(props: any, { slots }: SetupContext) {
return () => {
return (
openBlock(),
createBlock('div', null, [renderSlot(slots, 'default')])
)
}
}
}
const Wrapper = {
setup(props: any, { slots }: SetupContext) {
// use the manually written render function to rendering the optimized slots,
// which should make subsequent updates exit the optimized mode correctly
return () => {
return slots.default!()[state.value]
}
}
}
const app = createApp({
setup() {
return () => {
return (
openBlock(),
createBlock(Wrapper, null, {
default: withCtx(() => [
createVNode(CompA, null, {
default: withCtx(() => [createTextVNode('Hello')]),
_: 1 /* STABLE */
}),
createVNode(CompA, null, {
default: withCtx(() => [createTextVNode('World')]),
_: 1 /* STABLE */
})
]),
_: 1 /* STABLE */
})
)
}
}
})
app.mount(root)
expect(inner(root)).toBe('<div>Hello</div>')
state.value = 1
await nextTick()
expect(inner(root)).toBe('<div>World</div>')
})
})