[2023-07-21] vue에서 변수에 component 객체를 넣었더니, Vue.warn 이 떴다. markRaw를 사용하세요

안녕하세요. 클스 입니다.

vue에서 변수에 component 객체를 넣었더니, Vue.warn 이 떴다. 

component 객체는 많은 정보를 담고 있어서, watch를 하게되면 엄청난 부하가 발생한다.

그래서 친절하게 markRaw를 사용하라고 알려준다.

import { markRaw } from 'vue';

export default {

data() {

return {

layout: null,

};

},

watch: {

$route: {

immediate: true,

handler() {

this.layout = markRaw(this.$route.meta.layout || DefaultLayout);

},

},

},

};

Vue.js에서 markRaw 함수는 객체를 "원시"로 표시하는 데 사용되며, 이는 Vue 반응성 시스템에서 관찰되지 않음을 의미합니다. 특정 성능 문제가 있거나 특정 객체에 대해 Vue의 반응성 시스템을 선택 해제해야 하는 경우에만 사용하십시오.markRaw 함수는 다음과 같이 사용됩니다.

const obj = {
  a: 1,
  b: 2,
};

const rawObj = markRaw(obj);

이제 rawObj는 반응성이 없습니다. 즉, rawObj의 속성이 변경되면 Vue는 렌더링을 다시 트리거하지 않습니다.markRaw 함수는 특정 성능 문제를 해결하는 데 유용합니다. 예를 들어, 매우 큰 객체를 반응성 객체로 선언하면 Vue는 객체의 모든 속성을 추적해야 합니다. 이는 성능 저하의 원인이 될 수 있습니다. 이 경우 markRaw 함수를 사용하여 객체를 반응성으로 선언하지 않고 렌더링을 다시 트리거하지 않도록 할 수 있습니다.markRaw 함수는 또한 특정 객체에 대해 Vue의 반응성 시스템을 선택 해제해야 하는 경우에 유용합니다. 예를 들어, 객체가 외부 라이브러리에서 제공되고 Vue의 반응성 시스템과 호환되지 않는 경우 markRaw 함수를 사용하여 객체를 반응성으로 선언하지 않고 렌더링을 다시 트리거하지 않도록 할 수 있습니다.