Possible source of the reactive object warning of the Vue3 component: router

warn

When developing with ant-design-vue, the following warning is reported every time I enter the page:

[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`. 

It probably means that there is a component that is packaged into a responsive object, which will cause unnecessary performance overhead. This warning points to the following file:

/src/layouts/BasicLayout.vue

The first reaction is to find the problem in this layout, but it can't be solved. Here is actually a misunderstanding. The above warning actually tells you that the BasicLayout component is packaged into a reactive object, not that the problem lies within this component.

position

After jumping out of the misunderstanding, it is easy to locate the problem and look for the functional code that references the BasicLayout component.
One possible source is in the router. Because dynamic routing is used in the project, the filtered routing objects will be stored in the store, which contains the BasicLayout component.

// 动态路由
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'
  }
]

solve

According to the official prompt, you can directly import BasicLayout and modify it to shallowRef(BasicLayout).

import { shallowRef } from 'vue'
...
component: shallowRef(BasicLayout),
...

remind

In addition to the first-level BasicLayout mentioned above, if there is a component reference like a blank RouterView below, you must add shallowRef.

I recently used vue3+vite+antdv+ts to write a background project. After encountering this problem, I fell into a misunderstanding and searched for a long time and I couldn't solve it. I hope it will be helpful to everyone.