아키텍처 및 성능 개선
| 특징 | Vue2 | Vue3 | 장점 |
|---|---|---|---|
| 반응형 시스템 | Object.defineProperty |
Proxy |
• 전체 객체 프록싱으로 초기화 속도 향상 • 동적 속성 추가/삭제 지원 • Map/Set 자료형 지원 |
| 가상 DOM 최적화 | 전체 비교 | 패치 플래그 + 동적 노드 추적 | • 정적 노드 호이스팅으로 렌더링 재사용 • 동적 속성만 선택적 비교 |
| 트리 셰이킹 | 미지원 | 지원 | 사용하지 않는 모듈 자동 제거 |
| 다중 루트 요소 | 단일 루트만 허용 | Fragment 지원 | 불필요한 래퍼 요소 제거 가능 |
API 디자인 패러다임 전환
| 항목 | Vue2 (Options API) | Vue3 (Composition API) |
|---|---|---|
| 코드 구조 | 기능별 코드가 옵션별로 분산 | 관련 기능을 한 영역에 집약화 |
| 로직 재사용 | 믹스인 사용 (명명 충돌 위험) | 컴포저블 함수 (명확한 의존성 주입) |
| TypeScript | 제한적 지원 | 완전한 타입 추론 지원 |
실용 예제: 사용자 위치 추적
Vue2 구현 (Options API)
export default {
data() {
return {
position: { x: null, y: null }
};
},
methods: {
trackPosition(e) {
this.position.x = e.pageX;
this.position.y = e.pageY;
}
},
mounted() {
window.addEventListener('pointermove', this.trackPosition);
},
beforeUnmount() {
window.removeEventListener('pointermove', this.trackPosition);
}
};Vue3 구현 (Composition API)
import { ref, onMounted, onUnmounted } from 'vue';
export default {
setup() {
const cursorPos = ref({ x: 0, y: 0 });
const handleMove = (event) => {
cursorPos.value = {
x: event.clientX,
y: event.clientY
};
};
onMounted(() =>
window.addEventListener('pointermove', handleMove));
onUnmounted(() =>
window.removeEventListener('pointermove', handleMove));
return { cursorPos };
}
};개발 환경 개선 사항
- 애플리케이션 생성:
new Vue()→createApp() - v-model: 단일 컴포넌트 제한 → 다중 바인딩 지원
- 이벤트 버스: 내장 이벤트 시스템 → 외부 라이브러리 권장
생태계 변화
- 상태 관리: Vuex → Pinia 권장
- 라우팅: Vue Router 4 출시
- 하위 호환성: Vue2 API 호환 빌드 제공
핵심 비교 요약
| 영역 | Vue2 | Vue3 |
|---|---|---|
| 반응형 | Object.defineProperty | Proxy |
| API 패턴 | Options API | Composition API |
| 번들 크기 | 상대적 큼 | 트리 셰이킹 최적화 |
| TS 지원 | 제한적 | 완전 통합 |