위 이미지는 인스턴스 라이프사이클에 대한 다이어그램입니다.
:: 외울필요는 없지만 한번 봐두면 좋은 내용입니다.
출처 : VueJS 공식문서
:: setup()을 이용한 라이프사이클은 제외하고 정리해둔 내용입니다.
1. beforeCreate :
beforeCreate는 인스턴트가 생성되고 나서 가장 처음 실행되는 라이프 사이클 단계입니다.
컴포넌트를 생성하기 전에 호출이 되기 때문에 DOM이 세팅되지 않는 시점입니다.
즉, DOM에 접근하려는 시도를 이 시점에 하면 에러가 팡팡 터져 나오게 됩니다.
:: DOM => Document Object Model(문서 객체 모델)은 HTML이나 XML에 접근하기 위한 일종의 인터페이스
2. created :
created는 컴포넌트에 data속성과 methods속성이 정의된 상태입니다. 두 속성값에 접근하는 로직은 구현되어도 문제없이 작동되는 상태입니다.
하지만 화면 요소에 인스턴스가 세팅되지 않는 상태이기 때문에 template속성에 정의된 DOM요소에 접근하면 에러가 발생합니다.
3. beforeMount :
beforeMount는 템플릿과 렌더 함수들이 컴파일된 이후 첫 render()함수가 일어나기 직전 시점입니다.
created이후 속성에 지정한 마크업 속성을 render()함수로 변환 후 el속성에 지정한 화면 요소에 인스턴스를 세팅하기 직전에 호출되기 때문에, 화면이 나오기 이전에 호출해야 할 코드를 구현합니다.
4. mounted :
mounted는 화면 요소에 인스턴트 세팅이 된 후 호출됩니다.
template속성에 정의한 화면 요소에 접근이 가능하므로 화면 요소를 제어하는 코드를 구현합니다.
조심해야 할 점은, 컴포넌트에서 본인이 생각한 순서대로 mounted가 진행되지 않을수가 있습니다. 부모의 mounted가 자식의 mounted보다 먼저 실행되지 않습니다.
5. beforeUpdate :
beforeUpdate는 컴포넌트의 데이터가 변하여 업데이트 사이클이 시작될 때 호출됩니다.
이렇게 데이터가 변경되면 가상 DOM을 활용해서 화면에 새로 보여지게 됩니다. 이 때, 보여지기 직전에 호출되는 것이 beforeUpdate입니다.
즉, 변경 예정인 데이터의 값을 이용해서 구현해야 할 때 이 단계에서 진행합니다.
또한 그 데이터 값을 변경하는 로직을 구현해도 다시 화면에 보여지지 않습니다.
6. updated :
updated는 beforeUpdate가 끝나고 화면이 나타나면 호출됩니다.
데이터가 변경되고 화면 요소들을 제어하고 싶을때 이 단계에서 구현하면 됩니다.
조심해야 할 점은, beforeUpdate => updated => beforeUpdate => updated => ... 이런식으로 무한루프에 빠지게 될 수 있습니다.
그렇기에 데이터값을 변경하는 로직은 위 beforeUpdate에서 처리를 해주어야 합니다.
7. beforeDestroy :
beforeDestroy는 뷰 인스턴스가 해체되기 직전에 호출됩니다.
이 단계에서는 아직 인스턴스가 없어지지 않은 상태이기 때문에 접근이 가능하며 이벤트, 뷰 인스턴스 데이터 등을 삭제하거나 하는 용도로 사용하면 됩니다.
8. destroyed :
destroyed는 뷰 인스턴스가 해제되고 난 후에 호출됩니다.
뷰 인스턴스에 정의한 속성들이 제거되고 하위에 선언했던 인스턴스들 역시 모두 해체됩니다.