6P by xguru 1달전 | favorite | 댓글 3개
  • 이번 마이너 릴리스에는 내부 개선 사항과 유용한 새로운 기능이 포함, 호환성을 깨는 변경 사항은 없음

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.$host API를 추가하여 커스텀 엘리먼트의 호스트 엘리먼트 및 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>에 대한 defer prop을 도입했으므로 이제 이것이 작동함

onWatcherCleanup()

  • 3.5는 감시자(watcher)에서 정리 콜백을 등록하기 위한 전역으로 가져온 API인 onWatcherCleanup()을 도입함

이번 버전 이름은 "천원돌파 그렌라간" 이군요. (명작이죠! 제가 본 가이낙스 꺼는 이게 마지막인듯)

Vue 는 전통적?으로 만화 제목을 가져다 썼습니다. 1.0은 에반게리온, 2.0은 공각 기동대, 3.0은 원피스, 3.3은 바람의 검심, 3.4는 슬램덩크
https://en.wikipedia.org/wiki/Vue.js#Versions

고질적이었던 Vue와 Vite 콤비네이션의 SSR 대환장 환경이 점차 개선해 나가고 있으니 기대가 됩니다. Quasar 프레임워를 다시금 꺼내게 만드는군요.

이번 릴리스는 실제 컴포넌트 개발할때 편의성이 엄청 올라가긴 했네요