Vue Lifecycle Hooks
Vue Lifecycle Hooks
- Vue 인스턴스 Lifecycle : 생성(create) → DOM에 부착(mount) → 업데이트(update) → 소멸(destroy)
- Lifecycle Hook : Vue 인스턴스의 생명주기 각 단계에서 실행되는 함수
| Lifecycle Hook | 설명 |
|---|---|
beforeCreate |
- Vue 인스턴스가 초기화된 직후 - this.$el 에 접근 불가 ( ∵ DOM에 추가 전)- data, methods에 접근 불가 ( ∵ data, event, watcher에 접근하기 전) |
created |
- data를 반응형으로 추적할 수 있음 - computed, methods, watch 등이 활성화되어 접근 가능 - this.$el에 접근 불가 ( ∵ DOM에 추가 전) |
beforeMount |
- 마운트(DOM에 부착)가 시작되기 전에 호출 - 가상 DOM은 생성되었으나, 실제 DOM에 부착하지는 않은 상태 |
mounted |
- 지정된 엘리먼트에 Vue 인스턴스 데이터가 마운트 된 후 - 가상 DOM의 내용이 실제 DOM에 부착됨 - this.$el, data, computed, methods, watch 등 모든 요소에 접근 가능 |
beforeUpdate |
- data 값이 바뀌어서 DOM에도 적용시켜야할 때, 변화 직전에 호출 |
updated |
- 변경된 data가 DOM에도 적용된 상태 |
beforeDestroy |
- Vue 인스턴스 제거되기 전에 호출 - 해체되기 전이므로 모든 속성에 접근 가능 |
destroyed |
- Vue 인스턴스가 제거된 후 호출 - 인스턴스 속성에 접근할 수 없으며, 하위 Vue 인스턴스도 삭제됨 |
참고 자료
Leave a comment