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>

Vue，我在组件上使用了$ mount（），是否有一种方法可以对$ unmount（）进行引用？

1 个答案: