Vue Life Cycle

Instance Life Cycle Hooks

• 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 걸친다.
• 그 과정에서 사용자 정의 로직을 실행할 수 있는 Life Cycle Hooks도 호출
• 크게 4개의 파트 (생성, 부착, 갱신, 소멸)로 나뉜다.
• 모든 Life Cycle Hooks은 자동으로 this 컨텍스트를 인스턴스에 바인딩하므로 데이터, 계산된 속성 및 메소드에 접근할 수 있다.
• 단, 화살표 함수를 사용해 라이프 사이클 메소드를 정의하면 안된다.

단계별로

• beforeCreate
  인스턴스가 방금 초기화 된 후 데이터 관찰 및 이벤트, 감시자 설정 전에 동기적으로 호출
• created
  인스턴스가 작성된 후 동기적으로 호출.
  데이터 처리, 계산된 속성, 메서드, 감시/ 이벤트 콜백 등과 같은 옵션 처리 완료
  마운트가 시작되지 않았으므로 DOM 요소 접근 X
  즉, DOM 트리와 연결만 되지 않았을 뿐 메서드, watch, 요소 등은 다 준비된 상태
• beforeMount
  마운트가 시작되기 전에 호출
• mounted
  지정된 엘리먼트에 Vue 인스턴스 데이터가 마운트 된 후에 호출
  즉, DOM 트리와 연결
• beforeUpdated
  데이터 변경될 때 virtual DOM이 렌더링, 패치 되기 전에 호출
• updated
  Vue에서 관리되는 데이터가 변경되어 DOM이 업데이트 된 상태
• beforeDestroy
  Vue 인스턴스가 제거되기 전에 호출
• destroyed
  Vue 인스턴스가 제거된 후에 호출

💡 공식문서