VueJs는 아래와 같은 라이프사이클을 가지고 있습니다. 처음 VueJs를 통해서 웹개발을 하다보면 아래 라이프사이클을 제대로 이해하지 못하고, 개발하여 고생했던 기억이 있네요.
실행시 vue의 인스턴스를 생성합니다.
컴포넌트가 돔에 추가되기 전 가장먼저 실행되는 함수입니다. 때문에 돔과 관련된 this.$el를 사용할 수 없습니다.
beforecreate
Vue의 라이프사이클 훅중에서 가장먼저 실행되는 훅입니다. data와 events(vm.once, vm.emit)가 설정되기 전에 실행되기 때문에 사용시 오류가 납니다.
created
data와 methods, computed 들이 완성된 시점이기 때문에 해당 event를 사용할 수 있습니다. 주로 서버와의 데이터처리에서 많이 사용되는 훅입니다.
DOM을 삽입하는 단계입니다. 즉 DOM이 추가될때 실행되는 라이프사이클 훅입니다.
beforeMounted
아직 DOM에 접근할수 없는 단계입니다. 보통 data처리는 created에서 처리하기때문에 거의 사용하지 않습니다.
mounted
DOM에 접근할 수 있는 단계입니다. 이말은 모든 DOM이 생성된 이후에 접근가능하다는 이야기입니다. 자바스크립트의 이벤트 리스너를 설정하기도 합니다. (nexttick - 렌더링이 끝났다는 것이 보장된 상태에서 작업하기 위해서 사용하기 때문에 유용합니다.)
컴포넌트가 재랜더링 되면 실행되는 훅입니다. 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을때 사용하면 됩니다.
beforeUpdated
업데이트 된 값들을 가지고 있는 상태이기 때문에, 업데이트 된 값으로 다른 값들을 업데이트 할 수 있습니다.
updated
컴포넌트의 데이터가 변하여 재 렌더링이 일어나 후에 실행됩니다. mounted와 마찬가지로 돔이 업데이트 완료된 상태이므로 돔 종속적인 연산을 할 수 있다.
컴포넌트의 해체단계일 때 호출되는 훅입니다.
beforedestroy
컴포넌트 해체되기 전 호출됩니다. Destroyed가 호출되기전에 주로 이벤트 리스너를 제거할 때 많이 사용합니다.
detroyed
모든 컴포넌트 해체되고 난 후 호출되는 훅입니다. 컴포넌트의 모든 리스너가 해제되고 자식컴포넌트까지 해제됩니다.
VueJs의 라이프사이클을 정리해보았습니다.
사실 처음 VueJs을 통해서 개발을 할때에는 몰라도 크게 문제되진 않습니다. 하지만 앱이 점점 복잡해질수록 각 훅들이 하는 기능들을 알고있어야 합니다.
(안그러면 컴포넌트 간의 동작방식이 꼬일수 있습니다.)
저위의 Lifecycle중에 가장 많이 쓰는 함수는 아래와 같습니다. (제기준입니다.)
created
mounted
beforedestroy