我在一个组件上用过$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

您可以在新的DOM元素上调用$mount，将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>

​