[Vue] keep-alive

References

https://vuejs.org/guide/built-ins/keep-alive.html

https://ddolcat.tistory.com/1655

https://swoo1226.tistory.com/165

https://v3.ko.vuejs.org/api/built-in-components.html#transition-group

 

 

서론

Vue의 라이프 사이클에는 Create, Mount, Update, Destroy 총 4가지로 분류되어 자원을 관리한다.

문제는 이 과정에서 비활성화한 캐시된 컴포넌트 인스턴스를 제거하기 때문에 특정 컴포넌트로 재요청을 할 경우 원하는 데이터가 반영되지 않아 조회에 이상이 생길 수 있다.

따라서, 이에 대한 대응책이 필요한데 바로 keep-alive 기능이다.

 

 

keep-alive란?

keep-alive는 캐시된 컴포넌트를 reload 하는 기능으로, 컴포넌트가 keep-alive 태그 내에서 전환되면 activated와 deactivated 라이프 사이클 훅이 호출된다.

이러한 이유로 컴포넌트 상태를 유지하거나 다시 렌더링하지 않을 때 유용하게 사용할 수 있다.

<!-- 기본 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 여러 조건부 자식들 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- `<transition>`과 함께 사용 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

 

activated

keep-alive가 활성화될 때 자동으로 호출되는 기능으로, 재활성화 할 때에도 직접 호출하여 작동할 수 있다.

activated() {
	... 재활성화 시킬 구현문
}

 

deactivated

keep-alive가 비활성화될 때 자동으로 호출되는 기능이다.