Vue3 완벽 마스터 복습 필요 항목

1. vue3 component design

2. 일반 script vs script setup

3. plugin파일에서 app.config.globalProperties.$*** 와 app.provide('***', ***) 의 차이 

=> element에서 $로 바로 접근과 setup 함수(<script setup>)에서 접근 .. ? setup 함수에서 접근할 때는 inject('***') 사용 ?

4. 자바스크립트 문법

https://learnjs.vlpt.us/useful/06-destructuring.html

06. 비구조화 할당 (구조 분해) 문법 · GitBook

5. composition api 추천 lib

https://vueuse.org

VueUse

6. toRef와 toRefs

toRef: 특정 값만 반응형으로 뽑아내고 싶을 때, toRefs: 구조분해할당으로 뽑아내고 싶을 때

7. ref vs reactive

8. composable 함수 

관례: 함수명 접두사 use~

9. pinia

- 관례: store명 접두사 use~

- state / getters / actions

- store에는 화살표함수가 아닌 일반적인 function 함수 사용. why? this를 통해 state에 접근하기 위해.

-  state나 getters를 구조분해할당으로 하면 반응성 연결이 끊어진다. 값으로 할당되기 때문.. => storeToRefs 함수 사용.

- actions는 구조분해할당으로 가져와도 무방.

10. 네비게이션 가드

- 전역 가드

index.js에서 createRouter해서 router.beforeEach

- 라우트 가드

index.js 라우트 옵션에 beforeEnter

ex) removeQueryString .. 

- 컴포넌트 가드

Composition API

onBeforeRouteUpdate

onBeforeRouteLeave

Options API

beforeRouteEnter

(혼용 시, 일반 script도 선언하여 export default {})

 

11. slot

 

 

https://v3-docs.vuejs-korea.org/guide/components/slots.html#named-slots

슬롯 | Vue.js