1👍
No it never happens. Unmounted === Component-Destroyed. There seems to be only one case where a components elements are removed from the DOM and the component instance isn’t destroyed: inside a <KeepAlive>. But in that case the component isn’t technically unmounted. It is deactivated then activated. onUnmounted will not be called, and onMounted won’t be called on reactivation. Instead there’s onDeactivated / onActivated callbacks.
v-for key isn’t relevant here either. When a keyed component is unmounted it’s destroyed. key only helps make the patch more efficient by matching existing DOM content to new VDOM nodes when a rendered list order or content changes and a keyed component instance is recreated again.
The documentation could be a lot clearer about this. I still haven’t found anywhere in the docs where it says unequivically "Unmounted === Component Destroyed!!". But it’s implied by the Lifecycle diagram I guess. The KeepAlive page comes about as close as I can find to saying it explicitly:
By default, an active component instance will be unmounted when switching away from it. … When this component is displayed again, a new instance will be created with only the initial state. … Creating fresh component instance on switch is normally useful behavior …
I also tried a code review of the runtime-core renderer patch() function which is responsible for mount/unmount etc. But it’s quite complicated code so it’s hard to say definitively there is no code path where a component is unmounted but not destroyed, then recreated when mounted again – there is a lot of code paths. If it’s there it’s not obvious or the default, and we can definitively assert that at least under normal conditions without some weird config or direct custom use of the runtime-core, it doesn’t happen.
0👍
There is no such thing as mounted-again (or remount, or re-running the mounted hook a second time) in Vue.
A component is mounted and unmounted only once.
If the component is wrapped inside a <keepalive> built-in component, when it should be unmounted, it is cached (deactivated).
When the app logic dictates it should be rendered again, the saved DOM and state are used instead of being re-created from scratch. At that point the component (and all its children) are activated (@spinkus, that’s when patch-ing happens).
When is this useful?
- when you want a component to maintain state across the entire app’s lifetime (although, in general, a more solid and scalable solution is to use a store – however, exceptions do exist; e.g: stepped forms where it’s important to keep the validation state intact even when the user changes steps; I’ve also seen this used for remembering the page scroll position – a blatant overkill, IMHO)
- when you have components which you don’t want to re-initialise:
- a component which makes a call to a paid API. Rather than having it make the call every time it is toggled on/off, it only makes the call in
mountedhook, the first time it’s rendered. However, keep in mind this should be coupled with a client-side caching solution (storage) to prevent hitting the API on page refresh). - heavy components, such as mapbox maps, or chart components, which are a lot cheaper (from a performance POV) to re-render than to re-initialise.
- a component which makes a call to a paid API. Rather than having it make the call every time it is toggled on/off, it only makes the call in
And yes, for what it’s worth, it’s the same component. The state is kept and so are the DOM nodes. For example, if you open the console and manually hard-code border: 1px solid red to an active kept alive component, de-activate it and then re-activate it, you’ll notice the border is still red, even though the DOM element is removed while the component is deactivated. It’s the same component.
Relevant documentation:
-4👍
In Vue.js, a component is typically mounted only once in its lifetime, and it is not unmounted and re-mounted under normal circumstances. Once a component is created and mounted, it stays in the DOM until it’s destroyed.
The component lifecycle diagram suggests the following flow:
Creation Phase: During the creation phase, the component’s data, methods, computed properties, and watchers are set up. The created hook is called during this phase. However, the component is not yet inserted into the DOM.
Mounting Phase: The mounting phase begins after the creation phase is completed. In this phase, the component is inserted into the DOM, and the mounted hook is called. This is the point where you can access the component’s DOM elements and perform any additional setup.
Once a component is mounted, it remains in the DOM unless explicitly removed. Components can be destroyed using the destroy and this will trigger the beforeDestroy and destroyed hooks.
The separate "created" and "mounted" hooks are provided to give developers clear separation between the two phases of the component’s lifecycle. The "created" hook allows you to perform actions that need access to the component’s data and configuration but don’t require the component to be present in the DOM. The "mounted" hook, on the other hand, is suitable for actions that need access to the component’s DOM representation.
In typical usage, you wouldn’t encounter a situation where a component is mounted, unmounted, and then re-mounted unless you explicitly control the component’s lifecycle or use dynamic component mounting/unmounting with the v-if or v-for directives.
To summarize, under normal circumstances, a Vue.js component is mounted only once. However, it’s important to note that Vue.js efficiently manages component instances using a caching mechanism. When a component is unmounted and later re-mounted, it retains its previous state and data due to this caching mechanism. This behavior ensures efficient rendering and a seamless continuation from the previous state without unnecessary re-initialization.
If you encounter scenarios where a component appears to be unmounted and re-mounted unexpectedly, it is likely due to the usage of v-if or other conditional rendering mechanisms, where the component gets removed from the DOM based on certain conditions and then reinserted when the conditions change.