最近搞了一个后台搭建页面，前端进行渲染回显，类似于割腌版的低代码
实现功能的时候也遇到了点问题：
1：component如何通过接口返回数据进行查找组件位置
2：json数据格式的定义
3：内容填充的时候该怎么进行赋值从而防止渲染污染
4：样式编辑的时候该怎么进行隔离，防止污染
5：VueDraggable拖拽组件第一次进入页面时无法响应事件及改变数组内容
接下来就是解决办法：
1:component如何通过接口返回数据进行查找组件位置
第一种方法：defineAsyncComponent
activeModules.value.template = activeModules.value.template.map(module => ({
...module,
pcpath: defineAsyncComponent(() => import(/* @vite-ignore */ module.pcpath)),
}));
将 './xx.vue'等路径转换为component能够找到的路径
第二种办法：import导入（这里就说下全局的，局部的在这种需求下过于鸡肋)
1：在components文件下新建 index.ts 用作统一导出
import xx './xx.ue';
export {
xx
}
2：在min.js中全局注册
import * as components from '/@/views/xx/components/index'
const app = createApp(App);
// 移动端模版拖拽导出组件
Object.entries(components).forEach(([name, component]) => {
app.component(name, component)
})
app.mount('#app');
2: json数据格式的定义
初步采用的是一维数组，这里就简单的说下
最外面一个对象，表示是这条数据的所有东西，一个字段json格式表示这个页面所用的组件 组件格式：最外面一个对象，表示是这条数据的所有东西，一个字段json格式表示这个组件所有可配置的选项
3：内容填充的时候该怎么进行赋值从而防止渲染污染
刚开始的时候使用的是方法1进行组件的渲染，但是在这一步的时候会导致响应式问题，对内容进行修改后，左侧渲染区域也会进行修改，后采用了方法二并搭配中转变量进行JSON拷贝
方法1进行JSON拷贝时会导致：setup丢失，也就是会失去响应式导致component无法渲染出来
5：VueDraggable拖拽组件第一次进入页面时无法响应事件及改变数组内容
第一次进入页面时：拖拽正常但是不响应组件的事件，并且拖拽后左侧渲染区域也不会进行变化，但是完成编辑或者取消编辑后就能正常响应和渲染
排查：
1：组件加载问题，第一次进入时组件没有加载完成导致没有响应
2：内容区问题，因为是动态读取值
解决：
1：新建一个dom测试，发现并没有这个问题
2：排查发现初始变量为：const activeModules = ref<activeinte>({});
使用数据为：
<VueDraggable v-model="activeModules.template" @start="start" @end="onEnd" style="width: 100%;">
修改为：
const activeModules = ref<activeinte>({
template: []
});
问题解决
