Keep-alive 동적컴포넌트

컴포넌트 전환 & 라이프사이클

컴포넌트를 생성했을 시 created() 훅에 의해서 생성과 소멸이 반복하며 일어난다

컴포넌트 전환마다 페이지의 값이 초기화 되어야 한다면 문제가 없지만 컴포넌트 안에서 값을 유지해야하거나 성능상의 이유로 re-render를 피하고 싶다면 그때 사용하는것이

‘Keep-alive’ 엘리먼트로 해결이 가능하다

Keep-alive란

컴포넌트가 최초 생성되는 시점에 캐시를 해 준다

Keep-alive 엘리먼트가 없다면 전환이 일어날때마다 컴포넌트가 생성과 소멸을 반복하기때문에 datat가 유지 되지 않는다 ! 그렇기 때문에 다른컴포넌트에 다녀왔을 경우 data값이 초기화가 된다

💡 즉 ! 컴포넌트 data 값이 변해야 하는 경우에는 keep-alive 를 쓰면 안된다

그러나 keep-alive 엘리먼트로 둘러쌓인 컴포넌트는 최초 생성시기에 캐시가 되어 다른 컴포넌트에 다녀와도 새로고침이 발생하기 전까지 data가 유지가 된다

💡 새로고침이 일어나기 전까지 컴포넌트의 변화만으로 data가 변하지 않는다

keep-alive 조건부 캐시 처리

keep-alive의 대상이 되는 컴포넌트를 include를 사용하여서 조건부로 캐시처리도 가능하다

keep-alive

1. 컴포넌트 상태를 유지하거나, 다시 렌더링 되는것을 방지하기 위해서 사용된다
2. 컴포넌트가 keep-alive 내에서 전환되면 activated()와 deactivated() 라이프사이클이 호출된다
3. 컴포넌트가 destory되지 않기에 destory() 라이프사이클 훅이 호출되지 않는다.