低代码平台构想

1. 组件存在本地代码 使用defineAsyncComponent 进行异步加载组件

   const myCom = defineAsyncComponent(() => 
       import('@/xxx.vue')
   )
   

2. 组件网络请求的，且文件较小的

1. 动态组件使用 component
2. defineAsyncComponent 加载网络请求组件，Promise中resolve返回vue2 中的属性(template, data, props,methods,mounted)
3. 动态添加css, 并实现样式隔离[data-v-e7e0a46a]

    <component ref="dynamicRouteDom" v-if="dynamicRoute" :is="dynamicRoute"></component>
    
const dynamicRoute = ref(null)
const myCom = defineAsyncComponent(() => {
 return new Promise((resolve, reject) => {
   setTimeout(function() {

     const style =  document.createElement('style')
     style.type = 'text/css'
     style.innerHTML = '[data-v-e7e0a46a] .myClass { color: red; }';

     document.head.appendChild(style)

     resolve({
       template: '<div class="myClass" data-v-e7e0a46a>{{a}}</div>',
       data() {
         return {
           a: 'dynamicRoute'
         }
       },
               props: {},
               methods: {
                 print() {
                   console.log('Hello')
                 }
               },
               mounted: () => {
                 console.log('onMounted')
               }
     })
   }, 1000);
 })
})
dynamicRoute.value = myCom
const dynamicRouteDom = ref(null)
setTimeout(() => {
 console.log(dynamicRouteDom, '---dynamicRouteDom')
}, 3000)
console.log(myCom, '----res')

3. 组件文件较大的 使用微框架Micro