뷰 인스턴스 라이프 사이클

 

라이프 사이클 단계를 크게 나누면 인스턴스의 생성, 생성된 인스턴스를 화면에 부착, 화면에 부착된 인스턴스 내용이 갱신, 인스턴스가 제거되는 소멸로 구성 (부착 --> 갱신은 데이터가 변경되는 경우에만 거침)

 

 

• 인스턴스 생성!
  
  • new Vue()
• 이벤트 및 라이프 사이클 초기화
• beforeCreate
  • 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클 단계
  • data 속성과 methods 속성이 인스턴스에 정의되어 있지 않고, 돔과 같은 화면 요소에 접근 불가
• 화면에 반응성 주입
• created
  • data, methods 속성에 정의된 값에 접근하여 로직 수행 가능
  • 인스턴스가 화면 요소에 부착되기 전이기 때문에 template 속성에 정의된 돔 요소로 접근할 수 없음
  • data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단계이자 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋음
• el, template 속성 확인
• template 속성 내용을 render()로 변환
• beforeMount
  • template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출
  • render() 함수가 호출되기 직전의 로직을 추가하기 좋음
    • render(): 화면의 돔을 그리는 함수
• $el 생성 후 el 속성 값을 대입
  • vm.$el
    • 타입: Element
    • 읽기 전용
    • Vue 인스턴스가 관리하는 루트 DOM 엘리먼트 
• mounted
  • el 속성에 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계
  • template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋음
  • 돔에 인스턴스가 부착되자마자 호출 되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있음
• 인스턴스를 화면에 부착!

 

• 인스턴스의 데이터 변경 (아래의 두 속성은 데이터가 변경되는 경우에만 거침)
  • beforeUpdate
    • el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에 치환됨
    • 이때, 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위에 $watch 속성으로 감시 : 데이터 관찰
    • 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계
    • 변경 예정인 데이터에 접근 가능하여 이와 관련된 로직 미리 넣을 수 있으나, 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않음
  • 화면 재 렌더링 및 데이터 갱신
  • updated
    • 데이터 변경으로 인한 화면 요소 변경까지 완료
    • 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋음
    • 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있으므로 값을 변경하려면 computed, watch와 같은 속성을 사용해야 함
    • 가급적으로 데이터 값을 갱신하는 로직은 beforeUpdate에 추가하고, updated에서는 변경 데이터의 화면 요소(돔)와 관련된 로직을 추가하는게 좋음
    • mounted 단계와 마찬가지로 하위 컴포넌트의 화면 요소와 외부 라이브러리에 의해 주입된 요소의 최종 변환 시점이 다를 수 있음. $nextTick()을 사용하여 변환이 완료될 때까지 기다려야함 
      •  
  • 인스턴스 내용 갱신! 

 

• beforeDestory
  • 이 단계에서는 아직 인스턴스에 접근할 수 있음
  • 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
• 컴포넌트, 인스턴스, 디렉티브 등 모두 해제
• destroyed
  • 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 모두 파괴
• 인스턴스 소멸!