한 줄 요약 - Vue가 3.6에서 가상 DOM 없이 화면을 직접 그리는 'Vapor Mode'를 기능 완성 단계까지 끌어올려, Svelte/Solid급 속도를 냅니다.
무슨 일이에요?
Vapor 모드는 컴포넌트를 컴파일할 때 가상 DOM을 거치지 않고, 바뀌는 부분만 직접 갱신하는 코드로 변환합니다. 기존 컴포넌트와 섞어 쓸 수 있어 한 번에 갈아엎지 않아도 됩니다.
핵심 코드
<!-- script setup 에 vapor 속성으로 옵트인 -->
<script setup vapor>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<button @click="count++">count: {{ count }}</button>
</template>왜 중요해요?
- 번들이 작아지고 렌더 속도가 빨라집니다(가상 DOM 오버헤드 제거).
- 큰 생태계를 가진 Vue가 하위 호환을 지키며 합류해, 점진 도입이 쉽습니다.