비교할 문제
deep watcher 비용에서 확인할 질문은 Vue deep watch의 traversal 비용은 중첩 객체 크기와 변경 방식에 따라 얼마나 달라지는가입니다. 같은 중첩 변경을 감지하고 callback 결과를 같게 하며 전체 교체와 leaf mutation을 별도 사례로 둡니다. 결과값, 순서, 오류 처리와 부수 효과가 다르면 같은 성능 비교가 아닙니다. 먼저 두 후보가 같은 일을 하는지 작은 입력으로 확인합니다.
원인 분석과 재현
deep watch는 중첩 property를 순회하고 많은 dependency를 추적할 수 있어 필요한 leaf나 immutable replacement를 관찰하는 편이 낫습니다.
중첩 node 100·10,000개, leaf 1개 변경·root 전체 교체에서 watcher callback 수, update time과 heap을 기록합니다. runtime version, 운영체제, CPU와 memory 제한도 결과와 함께 기록합니다.
비교 질문은 Vue deep watch의 traversal 비용은 중첩 객체 크기와 변경 방식에 따라 얼마나 달라지는가입니다.
| 후보 | 유리한 조건 | 함께 치르는 비용 |
|---|---|---|
| deep watch | 모든 중첩 mutation을 관찰해야 함 | 큰 graph traversal과 넓은 dependency |
| 특정 getter watch | 관심 leaf가 명확함 | 관찰 field를 직접 유지 |
| shallowRef + immutable 교체 | root 단위 변경 계약 | 내부 mutation만으로 update되지 않음 |
app.config.performance = true;
const state = reactive(loadTree());
watch(() => state.settings.theme, recordThemeChange);
해결 방안과 판정
warm-up과 측정 구간을 나누고 여러 번 반복합니다. 서비스 지연은 median과 p95를, 처리량 비교는 단위 시간당 완료 수와 오류율을 함께 기록합니다. CPU time, allocation, RSS·heap, GC, I/O 중 이 작업에 직접 관련된 지표만 선택합니다. deep watcher와 DOM 목록 최적화는 다른 문제를 해결하므로 같은 후보 표에 두지 않습니다. 이 비교는 reactivity traversal과 callback 비용만 봅니다.
차이가 반복 실행의 흔들림보다 작다면 더 단순하고 읽기 쉬운 구현을 선택합니다. 차이가 충분히 크더라도 실제 요청 전체의 지연과 자원 사용이 개선되는지 확인한 뒤 적용합니다.
공식 문서와 적용 범위
문서의 기본값과 동작은 version에 따라 달라질 수 있습니다. 현재 runtime·framework version, 실제 입력과 요청 흐름에서 다시 확인합니다.