Vue.js 라이프사이클

인스턴스 라이프사이클 훅

인스턴스 라이프사이클 훅에는 크게 created, mounted, updated, destroyed 네가지로 나누어진다.

created

• creation 단계에서 실행되는 훅(hook)들이 라이프사이클 중에서 가장 처음 실행됨.
• 컴포넌트가 돔에 추가되기 전이고, 서버 렌더링에서도 지원되는 훅.
• 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el 를 사용할 수 없다.

beforeCreate

• 모든 훅 중에서 가장 먼저 실행되는 훅.
• 아직 data 와 events ( vm.$on, vm.$once, vm.$off, vm.$emit ) 가 셋팅되지 않은 시점이므로, 접근하려고 하면 에러가 발생함.

created

• created 훅에서는 data 와 events 가 활성화되어 접근할 수 있다. 하지만 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이다.

mounted : 돔(DOM) 삽입 단계

• 이 단계에서는 초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있다.
• 서버렌더링에서는 지원하지 않는다.
• 초기 랜더링 직전에 돔을 변경하고자 한다면 여기서 하면 된다. 하지만 컴포넌트 초기에 셋팅되어야 할 데이터 패치는 created 단계에서 하는게 좋다.

beforeMount

• 템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행된다.
• 대부분의 경우에 사용하지 않는 것이 좋다.
• 바로 위에 말했지만, 서버사이드 렌더링시에는 호출되지 않는다.

mounted

• 컴포넌트, 템플릿, 렌더링 된 돔에 접근할 수 있다. 하지만 모든 하위 컴포넌트가 마운트 된 상태를 보장하지 않는다.
• vm.$nextTick 를 사용하면 전체가 렌더링 된 상태를 보장할 수 있다.
• 서버렌더링에서는 호출되지 않는다.
• 주의할점.
• 부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서대로 mounted 가 발생하지 않는다. 즉, 부모의 mounted 훅이 자식의 mounted 훅 보다 먼저 실행되지 않고 오히려 반대임.
• Created 훅은 부모 -> 자식 순서대로 실행되지만, mounted는 그렇지 않다. 즉 부모는 mounted 훅을 실행하기 전에 자식의 mounted 훅이 끝나기를 기다린다.

updated : Diff 및 재 랜더링 단계

• 컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 재 렌더링이 발생되면 실행된다. 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을 때 사용하면 된다. 조심스럽지만, 꽤 유용하게 활용될 수 있는 단계.
• 서버렌더링에서는 호출되지 않는다.

beforeUpdate

• 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 실행된다. 정확히는 돔이 재 랜더링되고 패치되기 직전에 실행됨.
• 여기서 재 랜더링 전의 새상태의 데이터를 얻을 수 있으며, 더 많은 변경이 가능하다. 이 변경으로 인한 재랜더링은 트리거되지 않는다.

updated

• 컴포넌트의 데이터가 변하여 재 랜더링이 일어난 후에 실행된다. 돔이 업데이트 완료된 상태이므로, 돔 종속적인 연산이 가능하다. 하지만 여기서 상태를 변경하게 되면 무한루프에 빠질수도 있다. 모든 자식 컴포넌트의 재랜더링 상태를 보장해주지 않는다.
• mounted 와 마찬가지로 vm.$nextTick 를 사용하면 전체가 랜더링된 상태를 보장할 수 있다.

destroyed : 해체 단계

beforeDestroy

• 해체(뷰 인스턴스 제거) 되기 직전에 호출된다.컴포넌트는 원래 모습과 모든 기능을 그대로 가지고 있으며, 이벤트 리스너를 제거하거나 reactive subscription 을 제거하고자 한다면 이 훅이 제격이다.
• 서버 렌더링시 호출되지 않는다.

destroyed

• 해체(뷰 인스턴스 제거) 된 후에 호출된다. Vue 인스턴스의 모든 디렉티브가 바인딩 해제 되고 모든 이벤트 리스너가 제거되며, 모든 하위 Vue 인스턴스도 삭제된다.
• 서버 렌더링시 호출되지 않는다.

그외..

• activated와 deactivated 가 있으며, 각각 keep-alive 컴포넌트가 활성화 될 때와 비활성화 될 때 호출된다.

라이프사이클 다이어그램