[Vue.js] 뷰 인스턴스 생명주기 (Life Cycle)

• 생명주기(Life Cycle)
  • 인스턴스의 상태에 따라서 호출할 수 있는 속성들
  • 속성마다 개발자가 추가한 커스텀 로직을 Life Cycle Hook 이라고 함
  • 뷰 인스턴스는 객체이기 때문에 생명주기를 가짐
• 라이프 사이클 다이어그램
  • kr.vuejs.org/v2/guide/instance.html#라이프사이클-다이어그램

Vue 인스턴스 — Vue.js

 

• beforeCreate
  • 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클
  • 뷰 인스턴스의 data와 methods 속성이 정의되어 있지 않고 화면 요소(ex. dom)에 접근 불가
• created
  • data와 methods 속성 정의되어있음
  • 따라서 두 속성값에 접근 가능
  • 아직 화면 요소에 인스턴스가 부착되기 전이기 때문에 template 속성에 정의된 돔 요소에 접근하는 코드 구현 불가
• beforeMount
  • render()함수가 호출되기 직전의 단계
  • created 이후에 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 직전 호출됨
  • 화면에 붙이기 전 실행해야 할 코드 구현
• mounted
  • el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후 호출되는 단계
  • template 속성에서 정의한 화면 요소에 접근 가능
  • 화면 요소 제어하는 코드 구현
  • 돔에 인스턴스가 부착되자마자 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html 코드로 변환되는 시점과 다를 수 있음
• beforeUpdate
  • el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 난 후에 인스턴스 속성들이 화면에 치환됨
  • 치환된 값을 $watch 속성으로 감시 (관찰)
  • 관찰하고 있는 데이터가 변경되면 가상 돔을 이용해 화면을 다시 그려야함
  • 이때, 그리기 직전 호출되는 단계가 beforeUpdate
  • 변경 예정인 데이터 값을 이용해 작업을 해야할 때 이 단계에서 로직 구현
  • 변경하는 로직 구현해도 다시 화면에 그려지지는 않음
• updated
  • beforeUpdate가 끝나고 화면에 다시 그리고 나면 실행되는 단계
  • 데이터가 변경되고 화면 요소를 제어하고 싶을 때 이 단계에서 로직 구현
  • 그러나 beforeUpdate -> updated -> beforeUpdate -> .. 무한루프될 가능성 있음
  • 데이터 값 갱신하는 로직은 beforeUpdate에서 처리하는게 좋음
• beforeDestroy
  • 뷰 인스턴스가 destroy되기 직전에 호출되는 단계
  • 아직 인스턴스가 없어지지 않았기 때문에 접근 가능
  • 인스턴스의 데이터 삭제 혹은 인스턴스가 사라지기 직전에 해야하는 작업 구현
• destroyed
  • 뷰 인스턴스가 destroy되고 난 후 호출되는 단계
  • 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스 모두 destroy됨