javascript - 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

您可以在新的 DOM 元素上调用 $mount，将 component.$el 附加到 #app 并在 之后删除它$销毁。

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>