<component :is="comp"></component>
동적 컴포넌팅을 위해선 <component :is="comp(변수명)"> 태그를 사용한다. comp라는 변수명을 이용해
특정 컴포넌트들을 집어넣으면 동적으로 렌더링 시킨다. 매번 특정 컴포넌트를 전환할떄는 Destory 소멸되고
새로 생성된다. 하지만 컴포넌트를 전환할 때 컴포넌트의 상태를 유지하거나 성능상의 이유로 다시 렌더링되는걸
방지해야 할때가 있다.
이때 사용하는게 <keep-alive></keep-alive> 이다.
<component :is="comp"></component> 태그를 <keep-alive></keep-alive> 태그로 감싸면 컴포넌트가 전환될때도 Destroy 소멸하지 않고 계속 남아있다.
<keep-alive>
<component :is="comp"></component>
</keep-alive>
keep-alive
keep-alive는 컴포넌트의 상태를 보존할때 사용한다.
include 속성을 사용해 전활될때 소멸하지 않고 남길 컴포넌트를 지정할 수 있다.
아래와 같이 test1 이라는 컴포넌트는 재 렌더링이 되지 않고 캐시된 데이터를 다시 불러온다.
컴포넌트 전환 할때마다 페이지의 값이 초기화 되어야 한다면 상관 없지만 값을 유지해야 할때 사용한다.
<keep-alive include="test1">
<component :is="comp"></component>
</keep-alive>