기본 콘텐츠로 건너뛰기

라벨이 markRaw인 게시물 표시

[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  함수를 사용하여 객체를 반응성으로 선언하지 않고 렌더링을 다시 트리거하지 않도...