03. 뷰 인스턴스(Instance)

  뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위입니다.

1. 뷰 인스턴스 라이프 사이클

Vue's Lifecycle

 

  [용어] 라이프 사이클 훅(hook) : 각 라이프 사이클 속성에서 실행되는 커스텀 로직

2. 뷰 인스턴스 생성 및 옵션 속성

// Vue 생성자 : 미리 정의된 속성과 메서드 재활용 
new Vue({
  el: '#app', // el 속성 : 뷰 인스턴스로 화면을 렌더링할 때 화면이 그려질 위치의 돔 요소 지정
  data: {
    message: 'Hello Vue.js!'
  },
  template: {
    // 화면에 표시할 HTML, CSS 등의 마크업 요소를 정의하는 속성. 
  },
  methods: {
    // 화면 로직 제어와 관계된 메서드를 정의하는 속성. (마우스 클릭 이벤트 처리 등)
  },
  // ★★★ Vue's Lifecycle ★★★
  beforeCreate: {
    // 가장 처음 실행되는 라이프 사이클 단계
  },
  created: {
    /* 뷰 인스턴스가 생성되자마자 실행할 로직을 정의할 수 있는 속성
     * data 속성과 methods 속성 정의, 단 template 속성에 정의된 돔 요소 접근 불가
     * 컴포넌트가 생성되고 나서 실행되는 단계, 서버에 데이터를 요청하여 받아오는 로직 수행하기에 좋음
     */
  },
  beforeMount: {
    /* render() 함수가 호출되기 직전의 로직을 추가하기 좋음
     * render()는 자바스크립트로 화면의 돔을 그리는 함수
     */
  },
  mounted: {
    /* el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 호출되는 단계
     * template 속성에 정의한 화면 요소에 접근할 수 있어 화면 요소 제어하는 로직 수행하기에 좋음
     * 단, 돔에 인스턴스가 부착되자마자 바로 호출되기에 하위 컴포넌트나 외부 라이브러리에 의해 추가된
     *     화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있음
     * ★ 변환되는 시점이 다를 경우 $nextTick() API 활용하여 HTML 코드로 최종 파싱(변환)될 때까지
     *    기다린 후 돔 제어 로직 추가
     */
  },
  beforeUpdate: {
    /* 인스턴스 부착 후 데이터 변경 시 가상 돔으로 화면을 다시 그리기 전 호출되는 단계
     * 변경 예정 데이터의 값과 관련된 로직 수행
     */
  },
  updated: {
    /* 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계
     * 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계
     * (주의) 이 단계에서 데이터 변경 시 무한 루프에 빠질 수 있음
     *          > coumputed, watch 속성 사용
     * ★ mounted 단계와 마찬가지로 하위 컴포넌트의 화면 요소와 외부 라이브러리에 의해 주입된
     * 요소의 최종 반환 시점이 다를 수 있음 > $nextTick() 사용
     */
  },
  beforeDestory: {
    /* 뷰 인스턴스가 파괴되기 직전 호출되는 단계
     * 인스턴스에 접근이 가능하기에 뷰 인스턴스의 데이터를 삭제하기 좋은 단계
     */
  },
  destroyed: {
    // 뷰 인스턴스가 파괴되고 나서 호출되는 단계
  }
});