34 vue keep-alive 컴포넌트
source: categories/study/vue-experiance/vue-experiance_9-24.md
34. vue keep-alive 컴포넌트
- https://v3.ko.vuejs.org/api/built-in-components.html#keep-alive
- https://stackoverflow.com/questions/40898440/vue-2-keep-alive-not-working-with-router-view-and-key
- https://velog.io/@kyusung/VUE-keep-alive
- https://sunny921.github.io/posts/vuejs-keep-alive/
keep-alive, component tag - 탭메뉴 만들 때 아주 유용
max, include, exclude 아주 유용
keep-alive로 불러와지는 컴포넌트 안에서 activated, deactivated 라이프사이클훅 사용 - 아주 유용
<!-- keep-alive: component 안의 데이터를 기억한다. -->
<!-- keep-alive: max 프롭스: 최대 10개 까지만 캐싱, 10개 넘어가면 가장 예전에 저장했던 것부터 삭제됨 -->
<!-- include: 이 프롭스에 정의된 컴포넌트만 캐싱 -->
<!-- exclude: 이 프롭스에 정의된 컴포넌트만 제외하고 캐싱 -->
<!-- keep-alive 컴포넌트 안에서 불러와지는 컴포넌트들은 activated, deactivated 라이프사이클 훅이 추가됨 -->
<keep-alive :max="10">
<component :is="currentView" @change:author="changeAuthor"></component>
</keep-alive>