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
06. 비구조화 할당 (구조분해) 문법 이번에는 1장 섹션 6 에서도 배웠던 비구조화 할당 문법을 잘 활용하는 방법에 대해서 알아보겠습니다. 이전에 배웠던것을 복습해보자면, 비구조화 할당 문법
learnjs.vlpt.us
5. composition api 추천 lib
VueUse
Collection of essential Vue Composition Utilities
vueuse.org
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
v3-docs.vuejs-korea.org
'프로그래밍 > 정리' 카테고리의 다른 글
Nuxt 3 완벽 마스터 복습 항목 2 (0) | 2024.03.28 |
---|---|
Nuxt 3 완벽 마스터 복습 항목 (0) | 2024.03.26 |
스프링 DB 1편 정리 (0) | 2023.09.13 |