Vue 3.6 ALPHA is out! and it's FAST! — Vapor
- Vue 3.6 알파 버전이 출시되었으며, 핵심 기능인 Vapor 모드는 앱 성능을 크게 향상시키고 경량화를 목표로 합니다. 🚀
- Vapor 모드는 Virtual DOM(VDOM)을 사용하지 않아, VDOM의 DOM 트리 검사 및 차이점 비교 과정을 생략합니다. 🚫
- VDOM 사용 시 앱 기본 크기가 약 50KB인 반면, Vapor 모드에서는 약 6KB로 88% 감소하여 앱을 훨씬 가볍게 만듭니다. 📉
- Vapor 모드 사용법은
<script setup> 태그에 vapor 속성만 추가하면 되어 매우 간단합니다. ✨
- Vapor는 템플릿을 미리 정의된 DOM 템플릿으로 컴파일하고, 반응형 값을 Virtual DOM을 거치지 않고 실제 DOM 요소에 직접 바인딩합니다. 🔗
- 벤치마크 결과, Vue Vapor는 기존 Vue보다 훨씬 빠르며 Svelte와 유사한 성능 수치를 보여주어 성능 격차를 빠르게 줄이고 있습니다. ⚡
- 현재 알파 버전이므로, 로컬 테스트 시
npm install --legacy-peer-deps 플래그와 vapor-interop 플러그인을 사용하여 기존 의존성과의 호환성을 확보해야 합니다. 🧪
vapor-interop 플러그인을 통해 Vapor 컴포넌트와 VDOM 컴포넌트를 혼합하여 사용할 수 있어, 기존 UI 프레임워크와의 통합이 용이합니다. 🤝