Vue.extend创建组件到根节点

Vue.extend创建组件到根节点

import Vue from 'vue'

// 扩展组件
const testComponent = Vue.extend({
  template: '<div>{{ text }}</div>',
  data: function () {
    return {
      text: 'extend test'
    }
  }
})

// 手动渲染组件
const extendComponent = new testComponent().$mount()

// 挂载到body
document.body.appendChild(extendComponent.$el)

setTimeout(()=>{
  // 从body移除
  document.body.removeChild(extendComponent.$el);
  // 并销毁组件
  extendComponent.$destroy();
  // 回收组件
  extendComponent = null;
},5000)

注意：动态组件引入可能会导致无法渲染组件，一定要用动态组件可以通过import(组件).then方式接受后创建