Vue.js Lifecycle (2.x.x version)
- Vue 인스턴스 생성 후 사라지기까지의 단계
- 생성 (create), Dom에 부착 (mount), 업데이트 (update), destroy (제거) 크게 4가지 과정을 거침
Vue 는 각각의 단계에서, 제어할수 있도록 훅(Hook) Api 를 제공
- new Vue()
beforeCreate → created →beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed
- 그외 훅
activated, deactivated, beforeUnmount, unmounted errorCaptured, renderTracked, renderTriggered
훅(Hook) 사용시 주의점
- 모든 라이프사이클 훅은 자동으로 this 컨텍스트가 인스턴스에 바인딩 된다
- 그러므로 data, computed 및 methods 속성에 접근 가능
- 화살표 함수를 사용하여 훅 메소드를 정의하면 안된다 (화살표 함수가 부모 컨텍스트를 바인딩)
- 즉 화살표 함수안의 this는 같은 컴포넌트 인스턴스가 아니다
created: () => this.fetchTodos() ( X ) 정의되지 않음 (undefined) created() { this.fetchTodos() } ( O )
Vue Lifecycle Diagram
beforeCreate
- 모든 훅 중에 가장 먼저 실행되는 beforeCreate훅
- Vue 인스턴스가 초기화 된 직후, ObserveData / init Evets 하기 전 상태
- 컴포넌트가 DOM에 추가되기 전, this.$el 에 접근 x
- 또한 data, event, watcher에 접근하기 전이어서, data 와 methods 에도 접근 x
- 즉 data 와 events 가 세팅되기 전
created
- ObserveData / init Evets 적용 된 상태
- 즉 data와 events가 활성화되어 접근 가능
- data를 반응형으로 추적할 수 있게 됨
- computed, methods, watch 등이 활성화되어 접근이 가능
- 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이다.
- 즉 아직까지 DOM에는 추가되지 않은 상태, $el 속성은 사용할 수 없다
beforeMount
- DOM에 부착하기 직전에 호출되는 beforeMount훅
- 즉 템플릿과 렌더 함수들이 컴파일 된 후에 첫 렌더링이 일어나기 직전에 실행
- 사용을 권장하지 않음
mounted
- 일반적으로 가장 많이 사용하는 mounted훅
- 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행
- 컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있다.
- 즉 this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능
- 자식 컴포넌트 mounted 후 부모 컴포넌트 mounted 실행 (주의)
- 모든 하위 컴포넌트가 마운트된 상태를 보장하지는 않는다.
- 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우 등
- this.$nextTick() 사용하여 마운트 상태 보장
this.$nextTick(function() { // 모든 화면이 렌더링된 후 실행합니다. }) })
beforeUpdate
- 컴포넌트의 data 값이 변해서, DOM에도 그 변화를 적용시키기 직전에 호출되는 훅
- 변할 값을 이용해 가상 DOM을 렌더링하기 전이지만, 이 값을 이용해 작업할 수는 있다
- 훅에서 값들을 추가적으로 변화시키더라도 랜더링을 추가로 호출하지는 않습니다
updated
- 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출되는 updated훅
- 변경된 data가 DOM에도 적용된 상태
- 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated훅이 가장 적절
- data를 변경하는 것은 무한 루프를 일으킬 수 있어, 이 훅에서는 데이터를 직접 바꾸어서는 안된다
- mounted 훅과 마찬가지로, this.$nextTick을 이용해, 모든 화면이 업데이트 된 이후의 상태를 보장
beforeDestroy
- 해당 인스턴스가 해체되기 직전에 beforeDestroy훅이 호출
- 아직 해체되기 이전이므로, 인스턴스는 완전하게 작동하기 때문에 모든 속성에 접근이 가능
- 이 단계에서는 이벤트 리스너를 해제하는 등 인스턴스가 사라지기 전에 해야할 일들을 처리
destroyed
- 인스턴스가 해체되고 난 직후에 destroyed훅이 호출
- 해체가 끝난 이후기 때문에, 인스턴스의 속성에 접근할 수 없다
- 하위 Vue 인스턴스 역시 삭제
Study !