왜 사용해야 하는가?
- Vue 2 & 3 지원 (Vue 2의 경우 일부 기능 미지원)
- CSS 애니메이션, 브라우저, 컴포넌트 등의 유용한 헬퍼를
Use
함수로 제공 -
Composition API
사용으로 금방 친숙 (당연하겠지만 Options API 및 Composition API 모두 사용 가능) - 큰 커뮤니티, 검증된 함수
리액트 Hooks가 즐겁다? 그러면 마참내 react-use 도 즐겁다!
설치하기
npm i @vueuse/core
# 또는
yarn add @vueuse/core
# pnpm 쓰고싶다...
UMD 사용 시
<script src="https://unpkg.com/@vueuse/shared"></script>
<script src="https://unpkg.com/@vueuse/core"></script>
주요 함수
-
useTransition
: CSS 트랜지션 생성에 도움을 준다. -
useActiveElement
-document.activeElement
의 반응성 추가! -
useClipboard
: 반응성이 생신 클립보드 API -
useFetch
:Fetch API
에 반응성이 무슨 의미가 있나고? 이 함수를 통해 URL을ref
함수로 초기화해서 넣기만 하면 URL 값이 바뀔 때마다 내용도 바뀐다! -
useTitle
: 문서 제목을 동적으로 바꾸면서 Vue스럽게 원한다면 이만한 놈이 없다. -
templateRef
: Composition API 에서ref
지정한 요소를 가져오기엔 뭔가 좀 이상하다.. 하지만 이걸 쓰면 기존ref
요소를ref
함수 쓰듯이 쓸 수 있다. -
useWebSocket
: 웹소켓을 Vue 컴포넌트에 연결하는 엘레강스한 방법. -
onClickOutside
: 컴포넌트 요소 밖으로 마우스 클릭을 감지해서 대응하는 손쉬운 방법! -
useParallax
: 입체적인 효과를 반응형으로 즐기고 싶다면 이 함수가 손쉽게 수치를 제공해 준다. -
useStorage
:LocalStorage
/SessionStorage
내 지정된 값을 반응형으로? JSON 객체도 알아서 직렬화 및 해석도 해준다! -
asyncComputed
: 기본적으로computed
함수는 비동기를 지원하지 않는다. (왠만한 반응형 함수 마찬가지로 비동기 미지원) 비동기가 필요하다면 이걸 쓰면 된다. -
useDebounce
: 자주 바뀔 때, 일정 간격 이후 반응해서 안정적인 컴포넌트 새로고침이 필요하다면 이걸 쓰면 된다. -
useThrottle
: 자주 바뀔 때, 일정 간격 마다 반응해서 안정적인 컴포넌트 새로고침이 필요하다면 이걸 쓰면 된다. -
useRefHistory
: 반응형 데이터 +undo
+redo
기능까지 한 번에? 세상에나!
확장
이들은 추가 설치가 필요하다.
- Electron
npm i @vueuse/electron
- Firebase
npm i @vueuse/firebase
- Integrations
npm i @vueuse/integrations
- Vue Router 4
npm i @vueuse/router
(Vue 3 전용)-
useRouteQuery
- URL 뒤에 물음표로 시작하는 질의 키/값을 반응형으로 가져올 수 있다.
-
- RxJS
npm i @vueuse/rxjs
Top comments (0)