Suspense component kills reactive changes
Version
3.0.0
Reproduction link
https://codesandbox.io/s/vuenext-v300-suspense-reactivity-qglxd
Steps to reproduce
There is a really simple form with just two inputs. When you change the input data in the sandbox, you will see that the form state won't change between Suspense tags.
If the repo is not opening, please use the refresh button on top left of the sandbox browser.
What is expected?
The code
tag under the Suspense component should be reactive.
What is actually happening?
The reactive text is not changing.
Tried to make a minimal repro link:
https://codepen.io/meteorlxy/pen/QWNYKwe
If the slots of <Suspense>
have ANY child-elements (including comments), the bug occurred.
That happens in both #default
and #fallback
slots.
Tried to make a minimal repro link:
https://codepen.io/meteorlxy/pen/QWNYKwe
If the slots of
<Suspense>
have ANY child-elements (including comments), the bug occurred.That happens in both
#default
and#fallback
slots.
The code below is not responding:
<template #default>
<div>
<span>{{ msg }}</span>
</div>
</template>
This code is reactive:
<template #default>
<div>
{{ msg }}
</div>
</template>
It seems that there is a bug related to the watch/deep or something like that.
Made another repro link: https://codesandbox.io/s/vuenext-v300-suspense-reactivity-forked-1v92v?file=/src/index.js
openBlock() + createBlock()
: BUGcreateVNode()
: OKh()
: OK
It's not relate to reactive.
This bug is caused by the patchFlag
of VNode
is 0.
There is nothing to do in patchElement
function when input value changed.
Maybe it's bad way to fix this, but works fine.ðŸ˜ðŸ˜ðŸ˜
@softboy99 It works fine. see https://codesandbox.io/s/vuenext-v300-suspense-reactivity-forked-gmc0l?file=/src/index.js