search

vuejs / core

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
https://vuejs.org/
MIT License
47.63k stars 8.33k forks source link

Async Component inside Suspense doesn't receive prop update #11617

Open Disservin opened 2 months ago

Disservin commented 2 months ago

Vue version

3.4.37

Link to minimal reproduction

https://play.vuejs.org/#eNqVVl9P2zAQ/ypWtIcglZaJSZOyUMQYD0xjqwDtKdJkkmtr5tiR7YRWVb/7znaSpm0IjAcU+373/3fnboKrohhXJQRREOtUscIQDaYsCKdicZEERifBNBEsL6QyZEP0knIuX+5hPiJS3MlSGMjIlsyVzEkSoKUk+JKIVmNGF9AIxxN7st4cpkZkZZ6vd5Bv9niIuVvfy9KA+s3gZQft3rYaieBgSCrzglx0og2dmxMHaOMOwxNyMSWbRBCnMa4oLwH1bJwI3Vp8PPF1wSrgwUBecGoAT4TED6UuQGh/wvNenJE1KQUIg3W031jJeC9ob2TSsRJPOg7wqM2aA9GpLCBDZXdESTDCxqRSzNli/KylwO65JLwfxkH9KgyTApsX+fSszNXiu7szqoRRc58uIf3bc/+sV/YuCWYKNKgKC9zKDFULMF588/ATVvjdCnOZlRzRA8J70JKXNkYP+1qKDMPu4Fy0t67/TCwe9c3KYJGapGygFrl1eEe864HUd+Gej8+dHnYXqzijCvvTNwBd0mcwZwKu9Fqk1onr6YioN2cAO6QNuV4yniGp+qzUDPSeQktqh/ZsPrH08zaY/iFphnVAO+g3nFOuwbPZAzLgdI3C0H3cilzvqK0wHyWIQE7OMESmIcSGSl4h1ac220eWA5KyuR15a86I9bF1frpzQ20SZG96BKrCmMsFZpHXJSlcdTGRYwiv09mDtFm2g2jbjN4JoS+U1VmGH8/OzmxcfQquME627y/DcpMep2+OuO9exPRprY3D3LpNAjI5nFpkVdvD927VQRbByqEYytWcpmCbWGhf9zaSiDxJzJYK269EeK45YOz+T8PB3dfXvdRmgUV6zyLMWDVl2qs0Zb4km02HuNttPLGw43I1r8LQCA5UqH1pbFO7b00z2nUd/yP1AiOq6TGcd+30iASHq9tZ2S3vw5fLZr5vuH07LPXq98OdkXLV6RMTGV5+oMYopJJdCXis0Bo+de6ZafF9kb2DkW65dVj0atnNugDEtxttVj5xlt7iTqIixVXSCvqo7R3UCztEtoglKGaubFqRn2XiuLfPaNc5QXO4jIg2CtlVT3ztKtp5teRtuO83ZV0lv0jjV+L2Kp3OY9PaXyZH3aoHwH/aP/djo5b0kX64CYeUO2DSjksY1J8KlH0UMabz8afx+edg+w8Ab2v/

Steps to reproduce

Happens on startup, is child loading? true is true for an indefinite amount of time, which shouldn't be the case.

What is expected?

After 1 second is child loading? true should be false

What is actually happening?

After 1 second is child loading? true should be true

System Info

No response

Any additional comments?

Import the child component directly and it will work, doesn't work with async component. This is probably the issue which was encountered in https://github.com/vuejs/core/issues/11611, but without vuetify and vue-router. I checked vuetify and they use suspense and the MyRouterView.vue should be somewhat close to what vue-router does I think.

The issue disappears when the first loaded component let comp = shallowRef(dummy); is not a dummy but the Page component.

edison1105 commented 2 months ago

duplicate of #11611

a workaround

<template>
+  <div>
    <Child :is-loading="isLoading" />
+  </div>
</template>