# Vue 3.5 "Tengen Toppa Gurren Lagann" 릴리즈

> Clean Markdown view of GeekNews topic #16632. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=16632](https://news.hada.io/topic?id=16632)
- GeekNews Markdown: [https://news.hada.io/topic/16632.md](https://news.hada.io/topic/16632.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2024-09-06T10:16:02+09:00
- Updated: 2024-09-06T10:16:02+09:00
- Original source: [blog.vuejs.org](https://blog.vuejs.org/posts/vue-3-5)
- Points: 6
- Comments: 3

## Summary

Vue 3.5는 성능 향상과 메모리 사용량 감소를 위한 반응형 시스템 최적화, SSR 개선 사항, 그리고 커스텀 엘리먼트 기능 추가 등 다양한 내부 개선 사항을 포함하고 있습니다. 특히, 반응형 Props 구조 분해와 `useTemplateRef()` API 도입으로 개발자들이 더 간편하고 효율적으로 코드를 작성할 수 있게 되었습니다. 또한, Lazy Hydration과 `useId()` API 등 SSR 관련 기능들이 강화되어 서버와 클라이언트 간의 일관성을 유지하면서도 유연한 렌더링을 지원합니다.

## Topic Body

- 이번 마이너 릴리스에는 내부 개선 사항과 유용한 새로운 기능이 포함, 호환성을 깨는 변경 사항은 없음  
  
### 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()`을 도입함

## Comments



### Comment 28655

- Author: [hidden]
- Created: 2024-09-06T15:14:10+09:00
- Points: 1

[숨김 처리된 댓글입니다]

### Comment 28654

- Author: narusas
- Created: 2024-09-06T14:16:44+09:00
- Points: 1

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

### Comment 28630

- Author: xguru
- Created: 2024-09-06T10:17:01+09:00
- Points: 2

이번 버전 이름은 "천원돌파 그렌라간" 이군요. (명작이죠! 제가 본 가이낙스 꺼는 이게 마지막인듯)  
  
Vue 는 전통적?으로 만화 제목을 가져다 썼습니다. 1.0은 에반게리온, 2.0은 공각 기동대, 3.0은 원피스, 3.3은 바람의 검심, 3.4는 슬램덩크   
https://en.wikipedia.org/wiki/Vue.js#Versions