vue
Vue 렌더링.
Virtual DOM, render effect, patch, compiler 최적화 개념
Vue는 render function으로 Virtual DOM 트리를 만들고, 반응형 데이터가 바뀌면 diff(patch) 해 실제 DOM을 최소한으로 갱신합니다.
🔄 업데이트 흐름
- 반응형 데이터 변경
- 해당 컴포넌트 render effect 재실행 → 새 VNode 트리
- 이전 VNode와 patch (same type/key 비교)
- 변경된 DOM 노드만 반영
⚖️ React와 비교
| Vue | React | |
|---|---|---|
| 트리거 | Proxy setter → 자동 추적 | setState/dispatch → 리렌더 |
| 컴파일 | template 정적 분석, block tree | JSX, RSC 등 |
| 컴포넌트 memo | defineOptions({ inheritAttrs }), v-memo | memo, useMemo |
- Vue는 어떤 ref가 바뀌었는지 추적해 컴포넌트 단위 effect 실행
- React는 보통 부모 리렌더 → 자식도 리렌더(memo 없을 때)
⚡ 최적화 도구
- 서브트리 1회 렌더 후 고정
- deps 배열 같으면 skip (React memo 유사)
- 언마운트 대신 캐시 (탭 전환)
v-for에서 identity 유지
🔗 참고 자료
- Rendering Mechanism — VNode, patch, Virtual DOM 동작을 설명한다.
- Reactivity in Depth — 반응형 추적과 렌더 effect의 관계를 설명한다.
- Template Syntax — 템플릿 컴파일과 디렉티브를 설명한다.