Vue 3 아키텍처 개선 및 성능 최적화
2020년 9월에 정식 공개된 Vue 3는 내부 구현체를 전면 재설계하여 개발 생산성과 런타임 성능을 동시에 제고했습니다. 핵심 개선 사항은 다음과 같습니다.
- 성능 지수 개선: 번들 크기 약 41% 축소, 초기 렌더링 속도 55% 향상, 업데이트 주기 133% 가속화, 메모리 점유율 54% 절감.
- 반응성 시스템 교체: 기존 `Object.defineProperty`를 ES6 `Proxy`로 대체하여 객체 추가/삭제 추적 정확도를 높이고 관찰 오버헤드를 최소화.
- 빌드 파이프라인 리팩토링: Virtual DOM 구현체 최적화 및 Tree-shaking 도입으로 미사용 코드를 효과적으로 제거.
- TypeScript 네이티브 통합: 타입 정의 파일 의존도 제거 및 컴파일러 수준에서의 타입 추론 강화.
Composition API 및 신규 기능
Vue 3는 옵션 기반 API의 로직 분산 문제를 해결하기 위해 Composition API를 표준으로 채택했습니다.
- 로직 추출 및 재사용을 위한 `setup()` 진입점 제공
- 원시값 및 참조형 반응성 관리를 위한 `ref`, `reactive`
- 조건부 관찰 및 즉시 실행을 위한 `watch`, `watchEffect`
- 계층적 의존성 주입을 위한 `provide`, `inject`
또한 템플릿 엔진 및 내부 구성 요소에도 변화가 도입되었습니다. `Fragment`를 통한 단수 루트 제약 해제, `Teleport`를 활용한 DOM 노드 위치 이동, `Suspense` 기반의 비동기 상태 처리가 내장되었습니다. 데이터 옵션은 반드시 함수 형태를 유지해야 하며, `v-on` 디렉티브의 키 코드 수정자는 제거되었습니다.
프로젝트 스캐폴딩 및 도구 선택
환경 구축은 기존 `@vue/cli`나 차세대 빌드 도구인 `Vite`를 통해 진행할 수 있습니다.
Vite 기반 초기화
Vite는 개발 단계에서 번들링 과정을 생략하고 네이티브 ESM을 활용해 서버를 구동합니다. 이를 통해 초고속 콜드 스타트와 경량화된 HMR을 보장하며, 실제 요청 시에만 코드를 컴파일하는 온디맨드 방식을 채택했습니다.
# Vite 템플릿 기반 프로젝트 생성
npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev
진입점 파일 및 템플릿 구조 분석
프로젝트 생성 후 진입점 파일의 초기화 패턴을 비교해 보면 아키텍처 차이를 명확히 파악할 수 있습니다.
기존 Vue 2 스타일 진입점
import Vue from 'vue'
import RootComponent from './App.vue'
Vue.config.productionTip = false
new Vue({
render: createElement => createElement(RootComponent),
}).$mount('#app-container')
Vue 3 스타일 진입점
import { createApp } from 'vue'
import RootComponent from './App.vue'
const application = createApp(RootComponent)
// 전역 플러그인 또는 구성 요소 등록 단계
// application.use(SupportPlugin)
// application.directive('focus', { mounted: el => el.focus() })
application.mount('#app-container')
`createApp` 함수는 전역 상태를 공유하지 않는 독립형 앱 컨텍스트를 반환합니다. 이 덕분에 동일한 HTML 문서 내에서 서로 다른 설정값을 가진 다수의 Vue 인스턴스를 격리하여 실행하는 것이 가능해졌습니다.
템플릿 구조 유연성
컴포넌트 템플릿에서는 최상위 루트 요소가 단 하나여야 한다는 규정이 완화되었습니다. 진입 컴포넌트에서 다중 노드를 직접 선언하면 브라우저가 `Fragment`를 암묵적으로 처리하여 마크업 구조를 단순화합니다.
<template>
<!-- 루트 래퍼 제거: 다중 요소 직접 배치 가능 -->
<header class="site-header">
<img src="./assets/logo.svg" alt="Logo" />
</header>
<main class="content-wrapper">
<WelcomeView message="Vue 3 환경 준비 완료" />
</main>
</template>
이러한 구조적 변경은 불필요한 DOM 트리를 제거하고 접근성 표준을 준수하는 세맨틱 마크업 작성을 용이하게 합니다.