更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码： https://gitee.com/nbacheng/ruoyi-nbcio
演示地址：RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码： https://gitee.com/nbacheng/nbcio-boot
前端代码：https://gitee.com/nbacheng/nbcio-vue.git
1、从vue2移植到vue3后，开始定义的动态组件数组如下：
const allFormComponent = computed(() => { return [ { text:'单表示例', routeName: '@/views/workflow/demo/wf', component: () => import('@/views/workflow/demo/wf'), businessTable:'wf_demo' }, /*{ text:'主子表示例', routeName:'@/views/workflow/demo/modules/CesOrderMainForm', component:() => defineAsyncComponent(import(`@/views/workflow/demo/modules/CesOrderMainForm`)), businessTable:'ces_order_main' }*/ ] })
但通过上面方式显示不正常，后修改成2方式
2、从vue2移植到vue3后，开始定义的动态组件数组如下：
const allFormComponent = computed(() => { return [ { text:'单表示例', routeName: '@/views/workflow/demo/wf', component: defineAsyncComponent( () => import('@/views/workflow/demo/wf')), businessTable:'wf_demo' }, /*{ text:'主子表示例', routeName:'@/views/workflow/demo/modules/CesOrderMainForm', component:() => defineAsyncComponent(import(`@/views/workflow/demo/modules/CesOrderMainForm`)), businessTable:'ces_order_main' }*/ ] })
通过上面方式可以正常显示了，但会报下面的警告
received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.
警告原因：vue接收到一个组件，该组件是一个响应式对象。这可能会导致不必要的性能开销，应该通过使用’ markRaw ‘或使用’ shallowRef ‘而不是’ ref '来避免。
3、通过上面提示 ，我们进行调整
const allFormComponent = computed(() => { return [ { text:'单表示例', routeName: '@/views/workflow/demo/wf', component: markRaw(defineAsyncComponent( () => import('@/views/workflow/demo/wf'))), businessTable:'wf_demo' }, /*{ text:'主子表示例', routeName:'@/views/workflow/demo/modules/CesOrderMainForm', component:() => defineAsyncComponent(import(`@/views/workflow/demo/modules/CesOrderMainForm`)), businessTable:'ces_order_main' }*/ ] })
通过上面方式后，既不报警，也能正常使用了。
4、效果图
