해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면
Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기
각 Vue 인스턴스는 생성될 때마다 일련의 초기화 단계를 거친다. 예를 들어 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰 설정이 필요한 경우, 템플릿을 컴파일하는 경우, 인스턴스를 DOM에 마운트하는 경우, 그리고 데이터가 변경되어 DOM를 업데이트하는 경우가 있습니다. 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅도 도 호출됩니다. (I think this is important)
*라이프사이클 훅: 개발자가 Vue의 상태에 따라 로직을 추가하는 것
여러가지 라이프 사이클이 있지만 필자가 알고 있고 실무에서 자주 사용했던 상태들 위주로 정리 하겠다.
beforeCreate |
아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근할 수 없다. 또한 data나 methods,watch 등이 실행 되기 전이다. ※ vue 인스턴스 data 사용, vm.$emit, vm$on 등 인스턴스의 메소드, vm.$el도 사용 불가능 |
Created |
data,methods,watch 사용 가능하지만 아직 컴포넌트가 돔에 추가되기 전임 ※ vm.$el 사용 불가능 |
beforeMount |
dom에 바인딩 되기 직전 상태이다 ※ vm.$el 사용 불가능 |
Mounted |
dom에 바인딩 된 직후 상태이다. 모든 요소 사용 가능 |
beforeUpdate |
data의 값이 변경됨에 따라 dom에도 값 변경을 전달하기 직전 |
Updated |
data의 값이 변경됨에 따라 dom에도 값 변경이 된 직 후 |
beforeDestroy |
인스턴스가 해제되기 전 모든 속성 사용 가능 |
beforCreate |
인스턴스가 해제 된 후 모든 속성 사용 불가능 |
실무에서 주로 사용했던 것은 beforemount, mounted,update 쯤이 였던 것 같습니다.
beforemount= 외부에서 data로 값을 받아야하거나 또는 메서드를 실행하여 data에 저장해줄때 사용
mounted= 데이터가 dom에 부착된 후 해야 할 메서드 들 (대부분 비동기 api 호출)
updated= data값 변경에 따라 호출해야할 때 사용
이처럼 생명주기의 상태에 따라 원하는 로직을 적절히 사용해주면 조금더 짜임새 있는 코딩을 작성할 수 있던 것 같습니다.
마지막으로 부모와 자식이 있을 경우 생명 주기에 대해서 설명하고 마치겠습니다.
부모 - 자식
created ------------> create
↓
mounted<----------- mounted
이런식으로 흘러 가더군요. 이 흐름을 알고 있으면 컴포넌트의 적절한 훅에 로직을 넣어주면 좋을 것 같더라구요.
※주의사항
-위의 부모-자식 생명주기가 반드시 같은 상태로 유지한다고 보장 할 수가 없음. 왜냐면 비동기 함수가 호출되게 될 수도 있기 때문에 위와 같은 정확한 순서로 상태 변경을 하고 싶다면 this.$nextTick 을 사용하여 순위를 보장 받는게 좋을 것 같네요.
*Vue 인스턴스의 데이터가 변경된 후 DOM까지 변경이 완료 된 후에 nextTick에 있는 함수를 최종적으로 수행하게 된다.
아래 Vue 공식 홈페이지에서 퍼온 그림을 참조하시고 훅을 짜보시는 게 어떨까요?
[Vue.js] 6. computed 와 watch에 대한 이해와 예제 (0) | 2020.07.16 |
---|---|
[Vue.js] 5. 템플릿 문법 그리고 v-속성에 대한 이해와 예제 (0) | 2020.07.16 |
[Vue.js] 3. Vue 인스턴스의 속성과 메소드 그리고 기초 (0) | 2020.07.15 |
[Vue.js] 2. 컴포넌트(props,template)에 대한 이해와 예제 (0) | 2020.07.15 |
[Vue.js] 1. 디렉티브 (v-bind,v-on,v-if,v-for) 에 대한 이해와 예제 (0) | 2020.07.15 |
댓글 영역