warning使用ant-design-vue开发时，每次进入页面都会报如下警告：[Vuewarn]:VuereceivedaComponentwhichwasmadeareactiveobject.这可能会导致不必要的性能开销，应该通过使用markRaw标记组件或使用shallowRef而不是ref来避免。大概意思就是有一个组件被封装到一个响应式对象中，这会造成不必要的性能开销。这个警告指向下面这个文件：/src/layouts/BasicLayout.vue第一反应是发现这个布局有问题，但是还是解决不了。这里其实是一种误解。上面的警告实际上告诉你BasicLayout组件被包装为一个反应对象，而不是问题出在组件内部。定位跳出误区后，定位问题就很容易了，找找引用了BasicLayout组件的功能代码。一个可能的来源是在路由器内部。因为项目中使用了动态路由，过滤后的路由对象会存放在store中，store中包含了BasicLayout组件。//动态路由exportconstasyncRouterMap:Array=[{path:'/',name:'index',meta:{title:'Home'},component:BasicLayout,//这里引用了BasicLayoutcomponentredirect:'/welcome',children:[{path:'welcome',name:'Welcome',meta:{title:'Welcomepage',icon:'icon-antdesign'},component:()=>导入('@/views/welcome.vue')},...]},{path:'/:catchAll(.*)',name:'NotFound',redirect:'/404'}]根据官方说法提示，直接引入BasicLayout，改成shallowRef(BasicLayout)即可。import{shallowRef}from'vue'...component:shallowRef(BasicLayout),...reminder除了上面提到的一级BasicLayout，如果下面有像空白RouterView这样的组件引用，一定要加上shallowRef.最近在用vue3+vite+antdv+ts写后台项目。遇到这个问题后，陷入误区，找了半天也没能解决。希望对大家有所帮助。
