关于vue.js:Vue3组件reactive-object警告的可能出处router

正告

在应用 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 写后盾我的项目，遇到这个问题后，掉进误区搜了良久都没能解决，心愿对大家有帮忙吧。