vue

vue3[Vue warn]:

Vue received a Component which 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.
Component that was made reactive

这个报错是由于将组件作为参数传递到Component 的is属性中使用,而传递的组件参数可能会被作为响应式数据使用，造成性能问题。解决办法是使用markRaw （不允许改变响应属性），shallowRef(浅层响应)包裹起来。

<Component :is="item.component" v-bind="item.componentProps || {}" />

可编写一个方法批量处理，例如。

function handleComponents(_menus) {
  _menus.forEach((item) => {
    if (item.meta?.component) {
      item.meta.component = markRaw(item.meta.component);
    }
  });
  return _menus;
}