TIL - 42 : Vue Lifecycle

11 Jul 2022 in Study Log on Today I learned

Vue Lifecycle

• Vue의 라이프사이클은 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계

• Vue의 라이프사이클은 각 단계에서 실행되는 함수들이 있으며 라이프사이클 훅이라고 한다.

  • Creation : 컴포넌트가 실행될때 가장먼저 실행 DOM에 올라가기 전이므로 this.$el 접근 불가
    • beforeCreate : 인스턴스가 초기화 된 직후에 발생
    • created : 인스턴스가 생성된 후에 발생. data, coumputed, methods, watch 접근가능
  • Mounting : DOM의 삽입 단계. 컴포넌트에 액세스 할 수 있다. 서버 사이드 렌더링 중에는 실행 안됨
    • beforeMount : 초기 렌더링이 일어나기 전에 실행된다.
    • mounted : 인스턴스가 마운트 된후 실행. 가상 DOM의 내용이 실제 DOM 부착되고 난 이후에 실행
      모든요소에 접근 가능하며 제일 많이 쓰임
  • Updating : 컴포넌트에서 사용하는 반응형 속성들이 변경되거나 리렌더링될 때마다 호출
    • beforeUpdate : DOM이 붙기전에, 데이터가 변경될 때 호출된다. 기존 DOM에 접근 가능
    • updated : 컴포넌트 데이터가 변경되어 DOM이 리렌더링 된 후 실행된다.
  • Destruction : 해체 단계. 컴포넌트가 해체되고 DOM에서 제거 되면 실행된다.
    • beforeDestroy : Vue 인스턴스가 삭제되기 전에 호출된다. 인스턴스는 여전히 실행
    • destroyed : Vue 인스턴스가 제거된 후에 호출된다. 컴포넌트가 없어진것을 알려야 할때 유용