vue.extend挂载组件

遇到的问题

vue2在抽离组件时，要求按需加载，没有改组件的请求数据时，不加载此组件，有数据才加载

解决方法

方法一 v-if

这个可以说是很经典的一个办法,但是会有展示上的问题,即dom结构会先消失而后重新渲染
并不算是一个完美的解决方案,所以暂时Pass掉

方法二

通过$set来触发Vue的数据重新渲染机制(鸡肋), 大多数情况下要配合监听来使用

方法三 （推荐）

使用vue.extend()将组件挂载在指定DOM上
Vue.extend()方法其实是Vue的一个构造器，继承自Vue，创建一个子类，参数是一个包含组件选项的对象

Vue.extend({
	template: '',
	data: function() {
	return{}
	}
})

可以新建一个vue文件作为组件，或者用vue.component()函数生成，然后import改组件到页面，调用Vue.extend(组件名)，也可以传入组件的参数（propsData）属性

import habitBox from "xxx";
 let doctorHabitBox = document.getElementById('doctorHabit')
        if (!doctorHabitBox) return
        let DoctorHabitComponent = Vue.extend(habitBox)
        new DoctorHabitComponent({
          propsData: {
            list,
            id
          }
        }).$mount('#doctorHabit')

组件内容

<template></template>
<script>
export default {
  data() {
    return {}
  },
  props: {
    list: {
      type: Array,
      default: () => [
      ]
    },
    id: [String, Number]
  },
}
</script>

<style scoped></style>

注意在获取数据后在加载，需调用this.$nextTick()方法，等页面渲染完成后再挂载组件，这样就完成了组件的异步挂载。