Vue.js 인스턴스 - 옵션(속성) 및 라이프사이클

Vue 인스턴스

• Vue를 사용하기 위해 필수적으로 생성해야 하는 기본 단위(new Vue();)
• Vue인스턴스는 Vue를 통해 생성하는 하나의 오브젝트
• 인스턴스를 사용함으로써 Vue에서 미리 선언되어 있는 속성,API를 재사용 및 활용 할 수 있음

 

Vue 인스턴스 옵션(속성)

• el: Vue가 실행되는 html DOM요소를 지정, CSS선택자를 사용(ex. id: #, class: . 접두어 사용)
• data: Vue인스턴스가 관리하는 데이터, Reactivity 반영(data 변경 시 화면 자동 반영)
• template: 화면에 표시할 요소(html, css 등)
• props: 부모컴포넌트의 데이터를 받을 수 있는 속성의 리스트([])
• methods: 화면의 동작 및 이벤트 로직을 제어하는 메소드 선언
• computed: 데이터 표현을 더 직관적이고 간결하게 도와주는 속성
                     :종속 대상에 따라 캐싱, Validation처리, 간단한 연산 등에 적합
• watch: data에 정의한 속성의 변경을 계속 지켜보다가 변경될 경우 정의된 동작/액션 실행
              : http 데이터 요청 등 무거운 로직에 적합
• 기타 LifeCycle Hook: Vue 라이프 사이클과 관련된 속성(하단에 설명)

 

Vue 인스턴스 Lifecycle

- Lifecycle 공식 다이어그램

- 아래는 좀더 이해하기 쉬운 그림

 출처: Do it!, Vue.js 입문

• beforeCreate:
  - Vue 인스턴스가 초기화 된 직후에 발생.
  - 컴포넌트가 DOM에 추가되기도 전이어서 this.$el에 접근할 수 없고. data, event, watcher에도 접근하기 전이라 data, methods에도 접근 불가
• created: 
  - data를 반응형으로 추적할 수 있게 되며 computed, methods, watch 등이 활성화되어 접근이 가능.
  - 아직까지 DOM에 추가되지 않은 상태로 컴포넌트 초기에 외부에서 받아온 값들로 data를 세팅, 이벤트 리스너 선언 시 활용befoeMount: 
  - DOM에 부착하기 직전에 호출, 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태
• mounted:
  - 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행,
  - this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근 가능, 일반적으로 가장 많이 사용
  - 부모 컴포넌트의 mounted는 항상 자식 컴포넌트의 mounted 이후에 발생
• beforeUpdate: 
  - data의 값이 변해서 DOM에 그 변화를 적용시키기 전에 발생
  - 변할 값을 이용해 가상 DOM을 렌더링하기 전이지만, 이 값을 이용해 작업 가능
• updated: 
  - 가상 DOM을 렌더링 하고 실제 DOM이 변경된 이후에 호출
  - 변경된 data가 실제 DOM에도 적용된 상태
• beforeDestroy: 
  - 해당 인스턴스가 해체되기 직전 호출
  - 인스턴스 해제되기 이전이므로 모든 속성에 접근이 가능, 이벤트 리스너를 해제 등에 활용 가능
• destroyed: 
  - 인스턴스가 해제되고 난 직후 호출
  - 해체가 끝난 이후기 때문에 인스턴스 속성 접근 불가(하위 Vue 인스턴스 함께 삭제)

 

- Lifecycle Hook 속성 테스트

 

- 브라우저 콘솔에 출력 결과. mounted()에서 this.message를 수정해줬기 때문에 mounted -> beforeUpdate, update가 호출 됨

 

출처:

https://wormwlrm.github.io/2018/12/29/Understanding-Vue-Lifecycle-hooks.html