Subscribe on changes!

Cannot mount same component twice

avatar
Mar 11th 2022

Version

3.2.31

Reproduction link

sfc.vuejs.org/

Steps to reproduce

  1. Click on ModalA button -> The Hello A green text is displayed
  2. Click again the ModalA button

What is expected?

The Hello A text should be displayed

What is actually happening?

The text is emptied


It works if you click on the Hello A text to unmount() the component and you click again on ModalA button.

You can also watch this video:

https://user-images.githubusercontent.com/904724/157887965-6a4ff440-31d7-49b0-bd10-cd2faeff4fa6.mp4

It may be not a bug but I would love to understand what's happening and if it is expected, it should be documented in https://vuejs.org/api/application.html#app-mount

avatar
Mar 11th 2022

I think this might be CreatApp function causes this,because when you call CreatApp function the ismounted prop will become true , but the befroe vnode and current vnode is th same,it will only update ,but when we call CreatApp this function that will cleanup innerHTML . image

avatar
Mar 11th 2022

I don't know if it's a bug, so I add warn

avatar
Mar 11th 2022

I don't know if it's a bug, so I add warn

Good ~ i think this is a bug.Off topic, are you Chinese? Can you add a friend to communicate with me? vx:sudongyuer

avatar
Mar 12th 2022

I don't know if it's a bug, so I add warn

Good ~ i think this is a bug.Off topic, are you Chinese? Can you add a friend to communicate with me? vx:sudongyuer

ok

avatar
Mar 16th 2022

@Atinux Here's what happens:

  1. The second mount empties the container element.
  2. But since you did not properly unmount, the previous vnode is still cached in a property of the container element
  3. so the second mount's render finds a previous vnode, diffs against it, finds no differences to patch and thus does nothing to the DOM.

While we could surely handle this situation better, in terms of maybe raising a warning or something, I would not see this as a bug as apps should be properly unmounted, not simply overwritten.

avatar
May 13th 2022

Warning added in #5573

I don't think we should automatically unmount for the user since this could be unintended and it's better to force the user to be explicit about their intentions.