Vue3元件reactive object警告的可能出處：router

Vincent_Pat發表於2021-11-05
Vue元件ReactObject

警告

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

相關文章