警告
在使用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寫後臺專案，遇到這個問題後，掉進誤區搜了好久都沒能解決，希望對大家有幫助吧。