Vue 라이프사이클 훅

 

- 라이프사이클 훅

• 인스턴스 라이프사이클에서는 Vue 인스턴스를 가리키는 this 컨텍스트와 함께 호출
• Creation(초기화)
  • 컴포넌트가 DOM에 추가되기 전에 실행되는 단계
  • 서버 사이드 렌더링에서도 지원되는 훅
  • beforeCreate
    • 컴포넌트 초기화 단계 중 가장 처음으로 실행
    • 컴포넌트 데이터를 관찰하고 이벤트를 초기화
    • 데이터는 아직까지 반응적이지 않으며, 컴포넌트의 라이프사이클에서 발생하는 이벤트 역시 설정되지 않은 상태
      
      
  • created
    • Vue 인스턴스가 이벤트를 설정하고 데이터를 관찰할 때 발생
    • 템플릿은 아직 마운트되거나 렌더링 되지 않았지만, 이벤트들이 활성화되며 데이터에 반응적으로 접근하는 것이 가능
      
      
• Mounting(DOM 추가)
  • 가장 많이 사용되는 단계
  • 컴포넌트가 렌더링되기 직전이나 직후에 컴포넌트에 접근할 수 있는 단계
  • beforeMount
    • 컴포넌트가 DOM에 추가되기 직전에 실행되는 훅
      
      
  • mounted
    • 반응적인 데이터, 템플릿, 렌더링된 DOM(this.$el) 모두에 접근할 수 있어서 가장 많이 사용되는 훅
    • 컴포넌트에서 필요한 데이터를 외부에서 가져오는(fetch) 용도로 많이 사용
      
      
• Updating(재 렌더링)
  • 컴포넌트 내부의 반응적인 속성이 변했거나, 그 외의 것들이 재 렌더링을 일으킬 때 실행되는 단계
  • beforeUpdate
    • 컴포넌트 데이터가 변경되어 업데이트 사이클이 시작될 때 실행
      
      
  • updated
    • updated 혹은 컴포넌트의 데이터가 변하여 재 렌더링이 일어난 후에 실행
      
      
• Destruction(해제)
  • 컴포넌트를 더 이상 사용하지 않을 때 사용하는 단계
  • beforeDestroy
    • 컴포넌트가 해제되기 직전에 실행
    • 반응적인 이벤트들이나 데이터들을 해제하는 훅으로 적합
      
      
  • destroyed
    • 컴포넌트가 해제되고 난 직후에 호출
    • 모든 지시자들의 바인딩이 해제되었으며, 이벤트 리스터가 제거된 상태
      
      

---

- 라이프사이클 다이어그램