Vue <keep-alive>

Created

Created

2021 Apr 5 2:12

Tags

Tags

Vue Dynamic Component Caching

각각의 컴포넌트가 처음 만들어지고나서 캐시 처리해서 state 유지

동적으로 컴포넌트를 렌더링하면서 상태를 캐시해야하는 경우

컴포넌트는 destory 되지 않기 때문에 destroy lifecycle이 호출되지 않음

include와 exclude로 조건부 캐시

activated 와 deactivated lifecycle이 호출

max를 사용해 최대 컴포넌트 캐시 개수를 지정

비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시

Vue 렌더링 성능 개선하기

Vue 렌더링 성능 개선을 위한 간단한 방법 몇가지를 설명합니다. 이 문서는 Vue.js 2.6.10 버전을 기준으로 작성되었으며, 자세한 설명은 참고 링크를 확인해주세요. 함수형 컴포넌트는 Dumb(멍청한, 바보같은) 컴포넌트 또는 Stateless (상태 없는) 컴포넌트로 불리며, Data와 Lifecycle을 가지지 않은 컴포넌트를 지칭합니다. 기존의 props만 가지고 있는 컴포넌트에 functional 선언을 통해 앱 성능을 향상시킬 수 있습니다.

Vue 렌더링 성능 개선하기

https://velog.io/@kyusung/vue-rendering-optimization

Vue 렌더링 성능 개선하기

Vue.config 은 Vue의 전역 설정을 가지고 있는 객체입니다. 앱이 실행하기 전에 아래의 속성들을 변경할 수 있습니다: 사용방법: 객체의 속성을 삭제합니다. 객체가 반응형이면, 뷰 업데이트를 발생시킵니다. 주로 Vue가 속성 삭제를 감지하지 못하는 한계를 극복하기 위해 사용하지만 거의 사용하지 않아야 합니다.** 객체는 Vue 인스턴스 또는 Vue 인스턴스의 루트 데이터 객체일 수 없습니다.

https://kr.vuejs.org/v2/api/#keep-alive

API - Vue.js

Recommendations

/////////////