Vue.js best practice to remove component

Question

My website overwrites a specific DOM instead of asking for a page load. Sometimes, inside the DOM there will be some Vue.js components (all are single page components), which will be overwritten. Most of them reside in an app created for the sole purpose of building the component.

Two questions:

1. do I need to destroy those components? If YES: how?

2. Is there any better solution to this approach?

Answer 1

There is a destroy command to erase components:

Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners. Triggers the beforeDestroy and destroyed hooks.

https://v2.vuejs.org/v2/api/#vm-destroy

But if you only want the remove/hide the components, which are inside of one or many instances (i.e. the ones that are mounted via .$mount() or el: "#app" ) you should try to remove the components via v-if or hide via v-show.

In the instance template this will look like:

<my-component v-if="showMyComponent"></my-component>
<my-component v-show="showMyComponent"></my-component>

The v-show will just set display:none while v-if will remove the component from the DOM in the same way as $destroy() does. https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show