VueJs 라이프사이클

윤민재·2021년 2월 7일

VueJs는 아래와 같은 라이프사이클을 가지고 있습니다. 처음 VueJs를 통해서 웹개발을 하다보면 아래 라이프사이클을 제대로 이해하지 못하고, 개발하여 고생했던 기억이 있네요.

실행시 vue의 인스턴스를 생성합니다.

컴포넌트가 돔에 추가되기 전 가장먼저 실행되는 함수입니다. 때문에 돔과 관련된 this.$el를 사용할 수 없습니다.

beforecreate
Vue의 라이프사이클 훅중에서 가장먼저 실행되는 훅입니다. data와 events(vm. $on, vm.$ once, vm. $off, vm.$ emit)가 설정되기 전에 실행되기 때문에 사용시 오류가 납니다.
created
data와 methods, computed 들이 완성된 시점이기 때문에 해당 event를 사용할 수 있습니다. 주로 서버와의 데이터처리에서 많이 사용되는 훅입니다.

DOM을 삽입하는 단계입니다. 즉 DOM이 추가될때 실행되는 라이프사이클 훅입니다.

beforeMounted
아직 DOM에 접근할수 없는 단계입니다. 보통 data처리는 created에서 처리하기때문에 거의 사용하지 않습니다.
mounted
DOM에 접근할 수 있는 단계입니다. 이말은 모든 DOM이 생성된 이후에 접근가능하다는 이야기입니다. 자바스크립트의 이벤트 리스너를 설정하기도 합니다. (nexttick - 렌더링이 끝났다는 것이 보장된 상태에서 작업하기 위해서 사용하기 때문에 유용합니다.)

컴포넌트가 재랜더링 되면 실행되는 훅입니다. 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을때 사용하면 됩니다.

beforeUpdated
업데이트 된 값들을 가지고 있는 상태이기 때문에, 업데이트 된 값으로 다른 값들을 업데이트 할 수 있습니다.
updated
컴포넌트의 데이터가 변하여 재 렌더링이 일어나 후에 실행됩니다. mounted와 마찬가지로 돔이 업데이트 완료된 상태이므로 돔 종속적인 연산을 할 수 있다.

컴포넌트의 해체단계일 때 호출되는 훅입니다.

beforedestroy
컴포넌트 해체되기 전 호출됩니다. Destroyed가 호출되기전에 주로 이벤트 리스너를 제거할 때 많이 사용합니다.
detroyed
모든 컴포넌트 해체되고 난 후 호출되는 훅입니다. 컴포넌트의 모든 리스너가 해제되고 자식컴포넌트까지 해제됩니다.