正告
在应用ant-design-vue开发时，每次进入页面都有报以下这个warning：
[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`. 大略意思就是有一个组件，被包装成了响应式的对象，会造成不必要的性能开销。这个正告指向于以下的文件：
/src/layouts/BasicLayout.vue第一反馈就是在这个layout外面找问题，但始终解决不了。这里其实是进入了一个误区，以上正告其实是通知你，BasicLayout这个组件被包装成了reactive的对象，而不是问题出在这个组件外部。
定位
跳出误区后就好定位问题了，寻找援用了BasicLayout这个组件的性能代码。
一个可能的出处，是在router外面。因为我的项目里应用了动静路由，筛选后的路由对象，会存储在store外面，其中就蕴含了BasicLayout这个组件。
// 动静路由export const asyncRouterMap: Array<RouteRecordRaw> = [ { path: '/', name: 'index', meta: { title: '首页' }, component: BasicLayout, // 这里援用了BasicLayout组件 redirect: '/welcome', children: [ { path: 'welcome', name: 'Welcome', meta: { title: '欢送页', icon: 'icon-antdesign' }, component: () => import('@/views/welcome.vue') }, ... ] }, { path: '/:catchAll(.*)', name: 'NotFound', redirect: '/404' }]解决
依据官网提醒，将间接引入BasicLayout批改为shallowRef(BasicLayout)即可。
import { shallowRef } from 'vue'...component: shallowRef(BasicLayout),...揭示
除了上文提到的第一层的BasicLayout，上面如果有相似空白RouterView一类的component援用，都要加上shallowRef。
最近在用vue3+vite+antdv+ts写后盾我的项目，遇到这个问题后，掉进误区搜了良久都没能解决，心愿对大家有帮忙吧。