Vue, я использовал $ mount () для компонента, есть ли способ $ unmount () ссылки?

Question

Я понимаю, что это не то, как фреймворк изначально предназначался для использования. Что я хотел бы сделать, так это программно смонтировать компонент на странице, а затем программно размонтировать его.

const Component = Vue.extend({
    template: '<div>This works</div>'
})
const c = new Component()
c.$mount()
document.getElementById('app').appendChild(c.$el)

Здесь я бы хотел очистить компонент

c.$unmount()
c.$destroy()

Есть ли что-то подобное, что удалит слушателей и выполнит полную очистку?

Или я могу просто сделать следующее без последствий

document.getElementById('#app').innerHTML = ''

Answer 1

Вы можете вызвать $mount для нового элемента DOM, добавить component.$el к #app и удалить его после $destroy.

const component = new Vue({
  data() {
    return {
      message: "Hello"
    }
  },
  template: "<p>{{message}}<p>",
});

const app = document.getElementById("app");

// Mounting on a empty div created programatically
component.$mount(document.createElement("div"));
app.appendChild(component.$el);

setInterval(() => component.message = "Hello " + Date.now(), 100);

setTimeout(() => {
  // destroying the component and removing it from DOM
  component.$destroy();
  app.removeChild(component.$el); 
}, 2000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

<div id="app"></div>