Vue의 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 된다. 이를 **라이프사이클(lifecycle)**이라 한다. 즉, Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 일컫는 말이다.
공식 문서에서 다이어그램을 제공한다. 이는 위의 그림이다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다.
1. Creation 컴포넌트 초기화
creation hooks은 라이프사이클에서 가장 먼저 실행된다. 컴포넌트가 DOM에 추가되기 전에 수행하며, 서버 렌더링 중에도 실행된다.
클라이언트 렌더링 및 서버 렌더링 과정 모두에서 컴포넌트를 설정할 필요가 있다면 이 단계에서 처리한다.컴포넌트가 DOM에 추가되기 전이기 때문에 DOM에 접근하거나 this.$el를 사용할 수 없다.
1) beforeCreate
가장 먼저 실행되는 훅으로 컴포넌트 초기화한다. 아직 데이터와 이벤트가 설정되지 않은 단계이다. 만약 데이터와 이벤트가 세팅되지 않은 시점에서 접근하면 에러가 발생한다.
2) created
템플릿 및 Virtual DOM이 마운팅 혹은 렌더링 되기 전에 실행된다. 데이터와 이벤트가 활성화되어 액세스 할 수 있다.
- 데이터 초기화 시에 사용한다.
- 자식 > 부모 순으로 created hooks가 실행된다.
- computed, methods, watch등이 활성화되어 접근이 가능하게 된다. 그러나 DOM에 추가되지 않은 상태이다.
var app = new Vue({
el: '#app',
data() {
return {
msg: 'hello';
}
},
created(function() {
console.log(this.msg); // hello
})
})
- data에 직접 접근이 가능하다. 컴포넌트 초기에 외부에서 받아온 값들로 data 를 세팅해야 하거나 이벤트 리스너를 선언해야 한다면 이 단계에서 하는 것이 가장 적절하다.
2. Mounting DOM 삽입단계
mounting hooks는 가장 많이 사용되며, 초기 렌더링 전후에 즉시 컴포넌트에 액세스 할 수 있다. 그러나 서버 측 렌더링이 실행되는 동안에는 실행되지 않는다. 초기 렌더링 직전이나 직후에 DOM에 접근하거나 수정해야 하는 경우 사용한다.
1) beforeMount
템플릿 및 render 함수가 컴파일된 후, 초기 렌더링이 일어나기 직전에 실행된다.
2) mounted
컴포넌트, 템플릿, 렌더링된 DOM에 접근할 수 있고 DOM을 수정하기위해 사용된다.
- 특히 뷰가 아닌 라이브러리를 통합할 때 사용된다.
- 자식 > 부모 순으로 mounted hooks가 실행된다.
- this.$el, data, computed, methods, watch등 모든 요소에 접근이 가능하다.
부모 컴포넌트의 mounted훅은 항상 자식 컴포넌트의 mounted훅 이후에 발생한다.
3. Updating : Diff 및 Re-rendering 단계
컴포넌트에서 사용하는 반응형 속성들이 변경되거나 리렌더링될 때마다 호출된다.
디버깅이나 프로파일링을 위해 컴포넌트가 다시 렌더링되는 시기를 알아야 하는 경우 사용한다.
- 컴포넌트의 반응형 속성들이 언제 변경되는지 알아야 하는 경우에는 computed나 watch를 사용한다.
1) beforeUpdate
컴포넌트 데이터가 변경되고 업데이트 주기가 시작된 후 DOM이 패치되기 전 데이터가 변경될 때 호출된다.
컴포넌트가 렌더링되기 전에 반응형 데이터의 신규 상태를 가져와야하는 경우 사용한다.
2) updated
컴포넌트 데이터가 변경되어 DOM이 리렌더링 된 후 실행된다. property가 변경된후 DOM에 접근해야할 때 사용한다. 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated훅이 가장 적절하다.
- 여기서 상태를 변경하면 무한루프에 빠질 수 있다.
4. Destruction : 해체 단계
컴포넌트가 해체되고 DOM에서 제거될 때 실행된다.
beforeDestroy
해체 직전에 실행되며 컴포넌트는 여전히 완전하게 존재하고 작동한다. 그러기에 모든 속성에 접근이 가능하다.
destroyed
인스턴스가 해체되고 난 직후에 **destroyed**훅이 호출된다. 해체가 끝난 이후기 때문에, 인스턴스의 속성에 접근할 수 없습니다. 또한 하위 Vue 인스턴스 역시 삭제된다.
5. 그 외 hooks
- activated : keep-alive 컴포넌트가 활성화될 때 호출된다.
- deactivated : keep-alive 컴포넌트가 비활성화될 때 호출된다.
🔗 참고
https://velog.io/@hyeonjeong/Vue-뷰-라이프-사이클-life-cycle
https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html
