Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vnode-mounted seems to run twice when component is declared with defineAsyncComponent #4346

Closed
DeligiannisGeorge opened this issue Aug 15, 2021 · 0 comments · Fixed by #4349
Labels
🐞 bug Something isn't working

Comments

@DeligiannisGeorge
Copy link

Version

3.2.2

Reproduction link

https://codesandbox.io/s/amazing-currying-750nd?file=/src/App.vue

Steps to reproduce

  1. Both ComponentA and ComponentB should be asynchronusly imported
  2. Refresh page

What is expected?

On console we see that mounted is twice triggered

What is actually happening?

Mounted should be triggered once


Following the migration guide to vue 3 we saw this:
https://v3.vuejs.org/guide/migration/vnode-lifecycle-events.html#overview

So we have tried to follow the rules.

1.The first thing that we have observed was that vnode-created seems to not supported any more.

  1. The second one and relevant to this topic was (as title mentions) vnode-mounted seems to triggered twice when component is declared with defineAsyncComponent.
    The problem here is that, the first time that mounted is triggered, the component is not actually mounted. (there is no element rendered).

We want to render ComponentB when ComponentA is mounted, but ComponentB is rendered before ComponentA is mounted because as mentioned above, the first “vnode-mounted” trigger is lets say “fake”.

We are no sure what is the problem here.

Of course there is a workaround,
we can emit an event to App.vue from ComponentA,
when it will be mounted,
but we like this vnode-mounted, it’s very handy

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants
@HcySunYang @DeligiannisGeorge and others