Vue 성능
Virtual DOM, 반응성 최적화, v-once, v-memo, lazy loading, code splitting, bundle 크기
1Vue에서 Virtual DOM이란 무엇입니까?
Vue에서 Virtual DOM이란 무엇입니까?
답변
Virtual DOM은 실제 DOM 트리의 가벼운 JavaScript 표현입니다. Vue는 성능 면에서 비용이 큰 직접적인 DOM 조작을 최소화하기 위해 Virtual DOM을 사용합니다. 상태가 변경되면 Vue는 새로운 Virtual DOM을 생성하고 이를 이전 것과 비교한 다음(diffing 알고리즘), 실제 DOM에 필요한 변경 사항만 적용합니다. 이 접근 방식은 DOM 작업의 수를 크게 줄이고, 특히 업데이트가 많은 복잡한 애플리케이션에서 성능을 향상시킵니다.
2ref()와 shallowRef()의 주요 차이점은 무엇입니까?
ref()와 shallowRef()의 주요 차이점은 무엇입니까?
답변
ref()는 모든 중첩된 프로퍼티도 반응형이 되는 깊은 반응형 참조를 생성하는 반면, shallowRef()는 .value 프로퍼티 자체만 반응형으로 만듭니다. shallowRef()를 사용하면 객체 내부의 깊은 변경은 업데이트를 트리거하지 않습니다. 반응성을 트리거하려면 .value 전체를 교체해야 합니다. shallowRef()는 깊은 반응성이 필요하지 않은 대규모 데이터 구조의 성능을 최적화하거나 외부 상태 시스템을 통합할 때 유용합니다.
3v-once 디렉티브의 역할은 무엇입니까?
v-once 디렉티브의 역할은 무엇입니까?
답변
v-once 디렉티브는 첫 번째 렌더링 동안 요소와 그 자식 요소를 한 번만 렌더링한 다음, 이후의 모든 렌더링에서는 정적 콘텐츠로 처리합니다. 이는 데이터가 변경되더라도 요소가 절대 업데이트되지 않음을 의미합니다. 이 디렉티브는 배너 이미지, 로고, 또는 동적 업데이트가 필요 없는 텍스트처럼 초기 마운트 후 절대 변하지 않는 정적 콘텐츠의 성능을 최적화하는 데 유용합니다.
Vue 3.2+에서 도입된 v-memo 디렉티브는 어떻게 작동합니까?
Vue에서 markRaw()의 용도는 무엇입니까?
+19 면접 질문