Subscribe on changes!

Suspense component kills reactive changes

avatar
Sep 23rd 2020

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.

avatar
Sep 24th 2020

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.

avatar
Sep 24th 2020

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.

avatar
Sep 24th 2020

Made another repro link: https://codesandbox.io/s/vuenext-v300-suspense-reactivity-forked-1v92v?file=/src/index.js

  • openBlock() + createBlock(): BUG
  • createVNode(): OK
  • h(): OK
avatar
Oct 9th 2020

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.😭😭😭

avatar
Dec 31st 2020

Hi it seems that problems still exists for reactive array