Vue Instance life cycle(뷰 인스턴스 라이프 사이클)
인스턴스의 상태에 따라 호출할 수 있는 속성들을 라이프 사이클 속성이라고 한다.
그리고 각 라이프 사이클 속성에서 실행되는 커스텀 로직을 라이프 사이클 훅(hook)이라고 한다.
속성(순서대로 실행)
- beforeCreate
인스턴스가 생성된 후 가장 처음 실행되는 라이프 사이클 단계
data속성과 methods속성이 아직 인스턴스에 정의되어 있지 않고 돔 같은 화면 요소에도 접근 불가
- created
data속성과 methods속성이 정의되었기 때문에 this.data 또는 this.. fetchData()와 같은 로직들을 이용하여 data속성과 methods속성에 정의된 값에 접근하여 로직을 실행할 수 있다.
다만 아직 인스턴스가 화면요소에 부착되기 전이기 때문에 template속성에 정의된 돔 요소로 접근 불가
- beforeMount
template속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계. render 함수가 호출되기 직전의 로직을 추가하기 좋다.
- mounted
el속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계로, template속성에 정의한 화면요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계
다만 돔에 인스턴스가 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다.
※ 변환되는 시점이 다를 경우 $nextTick API를 활용해 HTML코드로 최종 파싱 될 때까지 기다린 후 돔 제어 로직 추가한다.
- beforeUpdate
el속성에서 지정한 화면요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됨
치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch속성으로 감시한다.
또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다.
- updated
데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 가능성이 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다.
따라서 데이터 값을 갱신하는 로직은 가급적 beforeUpdate에 추가하고 updated에서는 변경 데이터의 화면요소(돔)와 관련된 로직을 추가하는 것이 좋다.
- beforeDestroy = 뷰 인스턴스가 파괴되기 직전에 호출되는 단계
아직 인스턴스에 접근할 수 있으므로 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.
- destroyed = 뷰 인스턴스가 파괴되고 나서 호출되는 단계
뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴된다.