뷰 라이프 사이클이란?

인스턴스가 생성되고 나서 화면에 인스턴스가 부착된 후 소멸되기까지의 전체적인 흐름을 나타낸 뷰 인스턴스 라이프 사이클 다이어그램

속성	설명
Create	Vue() 인스턴스의 라이프사이클 중 맨 처음에 실행컴포넌트들이 DOM에 추가되기 전이기 때문에, DOM에 접근하거나 vm.$el을 사용할 수 없음SSR 적용 시 서버 사이드에서도 실행 가능한 단계
beforeCreate	인스턴스 생성 후 가장 처음 실행되는 단계. 이 단계에서는 data 속성과 methods 속성이 아직 인스턴스에 정의되어 있지 않고, 데이터에 대한 관찰 기능 및 이벤트 감시자 설정 전에 (vm.$on, vm.$once, vm.$off 등) 호출되어 돔과 같은 화면 요소에도 접근할 수 없다.
created	data 속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여 data 속성과 methods 속성에 정의 된 값에 접근하여 로직을 실행할 수 있다. Vue 인스턴스가 생성된 후 데이터에 대한 관찰 기능, 계산형 속성, 메서드, 감시자 설정이 완료된 후에 호출된다. 다만, 아직 인스턴스가 화면 요소에 부착되기 전이므로 template속성에 정의된 돔 요소에 접근할 수 없다(vm.$el 사용 불가능). SSR 적용 시 서버 사이드에서도 실행 가능한 단계.  (beforeCreate와는 다르게 injection 이후에 이루어지므로 데이터나 이벤트들을 사용할 수 있음. 템플릿과 가상 DOM이 마운트 및 렌더링되지 않은 시점.)
Mount	렌더링 직전의 컴포넌트에 접근할 수 있음. 이 단계부터는 서버 사이드에서 호출되지 않기에, 접근할 수 없음.
beforeMount	template 속성에 지정한 마크업 속성을 render()함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계. 마운트가 시작되기 전에 호출된다. render() 함수가 호출되기 직전의 로직을 추가하기 좋다. (함수들이 컴파일 직후, 렌더링 직전에 실행.)
mounted	el 속성에서 지정한 화면 요소에 인스턴스가 부탁되고 나면 호출되는 단계로, template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋은 단계이다.  다만, 돔에 인스턴스가 부착되자마자 바로 호출되므로 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다. (DOM이 메모리에 생성되고 렌더링 된 이후에 실행됨) (vm.$nextTick으로, 전체 렌더링 상태를 보장할 수 있음.child가 있을 경우, child 컴포넌트의 mounted를 기다린 후에, 실행)
Update	컴포넌트가 재 렌더링시에 실행. 흐름 상 당연하겠지만, 서버 사이드에선 실행되지 않음.
beforeUpdate	el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환된다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch 속성으로 감시한다. 이를 데이터 관찰이라고 한다.  또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며, 변경 예정인 새 데이터에 접근할 수 있어 추가적인 상태 변경을 수행하거나 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지거나 추가로 다시 렌더링하지 는 않는다. (컴포넌트에서 사용되는 속성이 변하여, 업데이트 사이클이 시작되었을 때 실행. 정확히는, DOM이 재 렌더링되기 전에 실행.)
updated	데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면(렌더링 및 패치된 후) 실행되는 단계. 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계이다. 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면 computed, watch와 같은 속성을 사용해야 한다. 데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고, 여기서는 변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는 것이 좋다. (재 렌더링 이후에 실행. DOM과 관련된 로직 처리가 가능. 모든 child 컴포넌트들의 렌더링 상태를 보장하지 않음. mounted와 마찬가지로, vm.$nextTick를 사용 시에 전체 렌더링 상태를 보장할 수 있음.)
beforeDestroy	뷰 인스턴스가 제거되기 직전에 호출되는 단계이다. 이 단계에서는 아직 인스턴스에 접근할 수 있다. 따라서 뷰 인스턴스의 데이터를 삭제하기 좋은 단계이다.
destroyed	뷰 인스턴스가 제거되고 나서 호출되는 단계이다. 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 제거된다. Vue 인스턴스의 모든 디렉티브의 바인딩이 해제되고, 이벤트 연결도 모두 제거된다.

부모 컴포넌트와 자식 컴포넌트의 mounted 흐름

부모 컴포넌트와 자식 컴포넌트의 mounted 흐름

만약 부모 컴포넌트에서 자식 컴포넌트를 호출하였을 때, 둘 다 mounted가 존재한다고 가정하자.

그럼 다이어그램의 플로우대로, 자식 컴포넌트의 mounted가 먼저 실행된 이후에 부모 컴포넌트의 mounted가 실행된다.