Cannot mount same component twice
Version
3.2.31
Reproduction link
Steps to reproduce
- Click on
ModalA
button -> TheHello A
green text is displayed - 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
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 .
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
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
@Atinux Here's what happens:
- The second mount empties the container element.
- But since you did not properly unmount, the previous vnode is still cached in a property of the container element
- 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.