Vue 생명주기

1. 인스턴스 생성
   인스턴스를 생성할때 vue는 뷰-모델에서 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트를 생성하여 초기화함.
2. 템플릿과 가상 DOM 생성
   vue가 템플릿 혹은 렌더링 함수를 찾아 템플릿을 컴파일함. 가상 dom 복사본을 만들고 그결과를 html dom에 마운트함.
3. 이벤트 루프
   이벤트 루프 중에 관찰자는 뷰-모델의 데이터를 감시. 병화가 있으면 가상 dom이 다시 렌더링되어 html dom에 적용
4. 인스턴스 소멸
   앱이 소멸되기 시작하면 완전히 소멸되기 전에 모든 관찰자,이벤트 리스너, 자식 컴포넌트들이 삭제.

Create

• vue() 인스턴스의 라이프사이클 중 맨 처음에 실행
• 컴포넌트들이 dom에 추가 되기전이기 때문에 dom 접근 불가. vm.$el 사용x
• SSR 적용시 서버사이드에서도 실행 가능한 단계

beforeCreate

• 제일 먼저 실행되는 훅.
• 데이터와 이벤트들이 설정되지 않아 접근 불가.(vm.$on, vm.$once,vm.$off)

created

• beforecreated와는 다르게 injection이후에 이뤄지므로 데이터나 이벤트들을 사용할 수 있음.
• 템플릿과 가상 dom이 마운트 및 렌더링 되지 않은 시점

Mount

• 렌더링 직전에 컴포넌트에 접근 가능
• 서버 사이드에서 호출되지 않아 접근 불가

beforeMount

• 함수들이 컴파일 직후 렌더링 직전에 실행

mounted

• dom이 메모리에 생성되고 렌더링 된 이후에 실행됨
• vm.$el이 생성된 시점이라 요소에 접근 가능
• vm.$nextTick으로 전체 렌더링 상태 보장 가능, child가 있을 경우 child 컴포넌트의 mounted를 기다린 후에 실행됨

update

• 컴포넌트가 재 렌더링시에 실행
• 서버 사이드에선 실행 불가

beforeUpdated

• 컴포넌트에서 사용되는 속성이 변하여, 업데이트 사이클이 시작되었을때 실행, 정확히는 dom이 재렌더링되기 전에 실행

updated

• 재 렌더링 이후에 실행. DOM과 관련된 로직 처리가 가능.
• 모든 child 컴포넌트들의 렌더링 상태를 보장하지 않음.
• mounted와 마찬가지로, vm.$nextTick를 사용 시에 전체 렌더링 상태를 보장할 수 있음.

Destroy

• 서버사이드 실행 불가

beforeDestroy

• Vue 인스턴스가 제거되기 전에 실행. 컴포넌트는 원래 모습과 원래 기능들을 가지고 있음.
• 이벤트 리스너나 subscription 제거에 사용하면 좋음.

destroyed

• Vue 인스턴스 제거 후에 실행. 모든 인스턴스와 디렉티브가 바인딩 해제되고, 모든 이벤트들이 제거됨.
• 하위 Vue 인스턴스도 제거됨.

Reference
공식문서 vuejs.org