fix(suspense): fix suspense nested child updates in template mode

fix #2214
This commit is contained in:
Evan You
2020-10-20 12:28:02 -04:00
parent 128ec460ec
commit 0227b4a697
2 changed files with 37 additions and 28 deletions

View File

@@ -14,6 +14,7 @@ import {
onErrorCaptured,
shallowRef
} from '@vue/runtime-test'
import { createApp } from 'vue'
describe('Suspense', () => {
const deps: Promise<any>[] = []
@@ -1068,4 +1069,28 @@ describe('Suspense', () => {
expect(serializeInner(root)).toBe(`<div>two</div>`)
expect(calls).toEqual([`one mounted`, `one unmounted`, `two mounted`])
})
// #2214
// Since suspense renders its own root like a component, it should not patch
// its content in optimized mode.
test('should not miss nested element updates when used in templates', async () => {
const n = ref(1)
const Comp = {
setup() {
return { n }
},
template: `
<Suspense>
<div><span>{{ n }}</span></div>
</Suspense>
`
}
const root = document.createElement('div')
createApp(Comp).mount(root)
expect(root.innerHTML).toBe(`<div><span>1</span></div>`)
n.value++
await nextTick()
expect(root.innerHTML).toBe(`<div><span>2</span></div>`)
})
})