Vue 3.5 "Tengen Toppa Gurren Lagann" 릴리즈
(blog.vuejs.org)- 이번 마이너 릴리스에는 내부 개선 사항과 유용한 새로운 기능이 포함, 호환성을 깨는 변경 사항은 없음
Reactivity 시스템 최적화
- Vue의 반응형 시스템이 대규모로 리팩터링되어 성능 향상 및 메모리 사용량(-56%) 개선을 이루었으며 동작 변경 사항은 없음
- 리팩터링으로 SSR 중 계산값 및 메모리 문제 해결
- 3.5에서는 크고 깊이 있는 반응형 배열에 대한 반응성 추적을 최적화하여 일부 경우 최대 10배 더 빨라짐
Reactive Props Destructure
- 반응형 Props 구조 분해가 3.5에서 안정화되었으며 기본적으로 활성화됨
-
<script setup>에서defineProps호출에서 구조 분해된 변수는 이제 반응형임 - 이 기능은 JavaScript의 기본 기본값 구문을 활용하여 기본값이 있는 props를 선언하는 것을 크게 단순화함
SSR 개선 사항
Lazy Hydration
- 비동기 컴포넌트는 이제
defineAsyncComponent()API의hydrate옵션을 통해 전략을 지정하여 하이드레이션 시점을 제어할 수 있음
useId()
-
useId()는 서버와 클라이언트 렌더링에서 안정적으로 보장되는 애플리케이션당 고유 ID를 생성하는 데 사용할 수 있는 API - 폼 요소 및 접근성 속성에 대한 ID를 생성하는 데 사용할 수 있으며 하이드레이션 불일치 없이 SSR 애플리케이션에서 사용할 수 있음
data-allow-mismatch
- 클라이언트 값이 서버 값과 다를 수밖에 없는 경우(예: 날짜)
data-allow-mismatch속성으로 하이드레이션 불일치 경고를 억제할 수 있음 - 속성에 값을 제공하여 허용되는 불일치 유형을 제한할 수도 있음(
text,children,class,style,attribute)
커스텀 엘리먼트 개선 사항
- 3.5는
defineCustomElement()API와 관련된 많은 장기적인 문제를 수정하고 Vue로 커스텀 엘리먼트를 작성하기 위한 여러 새로운 기능을 추가함 -
configureApp옵션을 통해 커스텀 엘리먼트에 대한 앱 구성을 지원 -
useHost(),useShadowRoot()및this.$hostAPI를 추가하여 커스텀 엘리먼트의 호스트 엘리먼트 및 shadow root에 액세스 -
shadowRoot: false를 전달하여 Shadow DOM 없이 커스텀 엘리먼트를 마운트하는 것을 지원 -
nonce옵션 제공을 지원하며, 이는 커스텀 엘리먼트에 의해 주입된<style>태그에 첨부됨
기타 주목할 만한 기능
useTemplateRef()
- 3.5는
useTemplateRef()API를 통해 템플릿 참조를 얻는 새로운 방법을 도입 - 3.5 이전에는 변수 이름을 정적
ref속성과 일치시키는 일반 참조를 사용하는 것이 권장되었음 - 이전 접근 방식은
ref속성을 컴파일러에서 분석할 수 있어야 했기 때문에 정적ref속성으로 제한되었음 - 이에 비해
useTemplateRef()는 런타임 문자열 ID를 통해 참조를 일치시키므로 변경되는 ID에 대한 동적 참조 바인딩을 지원함
지연 Teleport
- 내장
<Teleport>컴포넌트의 알려진 제약 조건은 teleport 컴포넌트가 마운트될 때 대상 요소가 존재해야 한다는 것 - 이로 인해 사용자가 Vue에 의해 렌더링된 다른 요소로 콘텐츠를 teleport하는 것이 방지되었음
- 3.5에서는 현재 렌더링 주기 이후에 마운트되는
<Teleport>에 대한deferprop을 도입했으므로 이제 이것이 작동함
onWatcherCleanup()
- 3.5는 감시자(watcher)에서 정리 콜백을 등록하기 위한 전역으로 가져온 API인
onWatcherCleanup()을 도입함
고질적이었던 Vue와 Vite 콤비네이션의 SSR 대환장 환경이 점차 개선해 나가고 있으니 기대가 됩니다. Quasar 프레임워를 다시금 꺼내게 만드는군요.