vue 2.0기준으로 작성한다.
vue 3.0에 대해서는 추후 작성해보겠다.
출처: https://kr.vuejs.org/v2/guide/instance.html
위 그림이 vue 인스턴스가 생성되고 사라질때까지의 라이프사이클이다.
beforeCreated, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed는 hook으로 제공된다.
beforeCreate
모든 훅 중 가장 먼저 실행되며, data, element 등이 셋팅되기 전이다.
실제로 사용해본 적은 없다.
created
data와 event는 접근 가능하지만 element는 셋팅되기 전이다.
이벤트리스너를 선언하거나, props를 통해 받아온 data를 셋팅하는 등 기본적인 전처리를 수행한다.
beforeMount
가상돔을 실제 돔에 부착하기 직전 단계이다.
주로 여기서 rest API를 호출하고 해당 컴포넌트에서 사용하는 값들을 초기화 하였는데
문서를보니 created 단계에서 하라고 권장하더라,,
mounted
가상 돔을 실제 돔에 부착한 후이다.
dom, data, computed 등등 모든 값에 접근이 가능하다.
부모 자식 관계에서 created 및 mounted가 일어나는 과정은 아래와 같다.
출처: https://medium.com/@brockreece/vue-parent-and-child-lifecycle-hooks-5d6236bd561f
beforeUpdate
data, props등의 변경으로 인해 리렌더링이 일어나기 직전이다.
이 훅에서는 리렌더링이 트리거되지 않는다.
updated
리렌더링이 일어난 후, dom 화면이 재구성된 후 불리는 훅이다.
리렌더링이 트리거된다.
무한루프에 빠질 수도 있으니 주의해서 사용해야 한다.
beforeDestroy
vue 인스턴스가 제거되기 직전에 호출된다.
이벤트 리스너를 제거하거나 clearInterval을 수행하거나 할때 사용한다.
destroyed
인스턴스가 해제되고 난 후 불린다.
역시 사용해본 적은 없다.
기타
activated와 deactivated 가 있는데 이를 설명하기 전에 keep-alive를 알아야 한다.
vue는 v-bind:is를 사용하여 특정 컴포넌트를 호출할 수 있다.
<component v-bind:is="{component name}">즉, 조건에 따라 컴포넌트 이름을 바꿔낄 수 있는데 이 경우 해당 컴포넌트는 위에서 정의한 라이프싸이클을 타게 된다.
re-rendering으로 인한 성능 이슈를 피하고 싶거나, 각 컴포넌트의 data 값 등을 유지하고 싶을 때(이건 props를 사용하면 되지만) 사용하는 것이 keep-alive이다
<keep-alive>
<component v-bind:is="{component name}"></component>
</keep-alive>이렇게 하면 위의 라이프싸이클 대신 activated와 deactivated를 타게 된다.
예상이 되겠지만 컴포넌트가 활성화 될 때 activated가 불리고 비활성화 될 때 deactivated 가 불린다.
