Vue 에러 [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 ..

vue에서는 컴포넌트를 동적으로 사용할수 있는 기능이 있다. 

 

객체를 생성해 프로퍼티의 value에 컴포넌트를 할당해 동적으로 컴포넌트를 사용하고자 했다.

 

<template>
      <component :is="el.component" />
</template>

...

import Ex from "@/views/Ex.vue";
const el = {
	component: Ex
}

이런식으로...

 

그런데 작동은 잘 되지만, warn이 엄청나게 나왔다!

 

원인을 대략 확인해 보니 경고 메시지 그대로, 반응성 객체로 만들어진 구성요소는 성능에 오버헤드를 초래 한다는 것이였다.

 

구글링 해본 결과 stack overflow에서 해결 방법을 찾았다.

https://stackoverflow.com/questions/65716637/vue3-performance-warning-using-ref

vue3 performance warning using ref

객체를 '원시'로 표시하는 markRow 함수를 사용하거나, 대규모 데이터 구조의 성능 최적화 또는 외부 상태 관리 시스템과의 통합에 사용되는 shallowRef 함수를 사용 해야 한다.

 

<template>
      <component :is="el.component" />
</template>

...
import { shallowRef } from "vue";
import Ex from "@/views/Ex.vue";
const el = {
	component: shallowRef(Ex),
}

markRow와 shallowRef

https://vuejs.org/api/reactivity-advanced.html#shallowreadonly

Reactivity API: Advanced | Vue.js