Vue 3.6 첫 RC 공개…Vapor Mode 기능 완성·반응성 엔진 개편

Vue.js 핵심팀이 18일 Vue 3.6.0의 첫 번째 릴리스 후보(RC.1)를 공개했다. Vue.js 공식 GitHub 릴리스에 따르면 이번 버전은 새 컴파일 방식인 Vapor Mode의 계획된 기능 구성을 완성하고, 핵심 반응성 패키지인 @vue/reactivity의 내부 구조를 크게 손질한 것이 핵심이다.

Vapor Mode는 Vue 단일 파일 컴포넌트(SFC)를 가상 DOM 중심 방식과 다른 경로로 컴파일해 기본 번들 크기를 줄이고 실행 성능을 높이는 선택형 기능이다. Vue 팀은 3.6 RC에서 이 모드의 목표 기능을 모두 구현했다고 밝혔다. 다만 기존 Vue API 전체를 지원하는 것은 아니며, 개발자가 컴포넌트 단위로 명시해 사용하는 방식이다.

Vapor 컴포넌트만으로 구성한 애플리케이션은 createVaporApp()을 통해 가상 DOM 런타임 없이 실행할 수 있다. 기존 createApp() 기반 애플리케이션에서 Vapor 컴포넌트를 함께 쓰려면 vaporInteropPlugin을 설치해야 한다. 표준 props와 이벤트, 슬롯은 두 렌더링 방식 사이에서 연동되지만, Vue 팀은 가상 DOM 기반 컴포넌트 라이브러리를 깊게 섞어 쓸 경우 아직 경계 사례가 남아 있다고 설명했다.

반응성 엔진도 바뀌었다. Vue 3.6은 @vue/reactivity를 alien-signals 기반으로 대폭 개편했다. 공식 릴리스는 이를 통해 반응성 시스템의 성능과 메모리 사용량이 크게 개선됐다고 밝혔지만, 이번 공지에는 개선 폭을 보여주는 구체적인 수치가 제시되지는 않았다. Vapor Mode에 대해서는 제3자 자바스크립트 프레임워크 벤치마크에서 Solid와 Svelte 5 수준의 성능을 보였다고 소개했다.

사용 범위에는 제약이 있다. Vapor Mode는 템플릿 전용 SFC와 script setup 형식을 지원하지만 Options API는 지원하지 않는다. app.config.globalProperties와 v-memo를 쓸 수 없고, Vapor 컴포넌트에서 getCurrentInstance()는 null을 반환한다. 컴포넌트 템플릿 참조도 $el과 $props, $attrs, $slots, $refs 같은 속성을 노출하지 않는다.

이번 RC는 Vue의 새 렌더링 경로가 실험적 베타를 넘어 기능 완성 단계에 들어섰다는 신호다. Vue 팀은 현재 기존 애플리케이션의 성능 민감 페이지에 부분적으로 적용하거나 소규모 새 애플리케이션을 Vapor Mode로 구축하는 용도를 권장하고 있다. 정식판 출시 일정은 공식 릴리스에 명시되지 않았다.

출처: Vue.js 공식 GitHub 릴리스 https://github.com/vuejs/core/releases/tag/v3.6.0-rc.1 · Vue 3.6 변경 기록 https://github.com/vuejs/core/blob/minor/CHANGELOG.md · alien-signals 공식 저장소 https://github.com/stackblitz/alien-signals