Vue Instance

Vue Instance?

인스턴스 생성

 new Vue();

인스턴스를 생성하고 나면 아래와 같이 인스턴스 안에 어떤 속성과 API가 있는지 콘솔 창에서 확인할수 있다.

var vm = new Vue();
console.log(vm)

이처럼 인스턴스 안에는 미리 정의되어 있는 속성과 메소드(API)들이 있기 때문에 이 기능들을 이용하여 빠르게 화면을 개발할수있다.

인스턴스의 속성, API들

인스턴스에서 사용할 수 있는 속성과 API는 다음과 같다.

new Vue({
	el: ,
  	template: ,
  	data: ,
  	methods: ,
	created: ,
  	watch: ,
});

• el: 인스턴가 그려지는 화면의 시작점 (특정HTML태그)
• template: 화면에 표시할 요소 (HTML,CSS등)
• data: 뷰의 반응성(Reactivity)이 반영된 데이터 속성
• methods: 화면의 동작과 이벤트 로직을 제어하는 메소드
• created: 뷰의 라이프 사이클과 관련된 속성
• watch: data에서 정의한 속성이 변화했을 떄 추가 동작을 수행할 수 있게 정의하는 속성

인스턴스 라이프 사이클

인스턴스 라이크 사이클이란 뷰의 인스턴스가 생성되어 소멸되기까지 거치는 과정을 의미한다

인스턴스 생성후 라이브러리 내부적 과정

• data 속성의 초기화 및 관찰 (Reactivity 주입)
• Vue 템플릿 코드 컴파일 (Virtual DOM -> DOM 반환)
• 인스턴스를 DOM에 부착

라이프 사이클 다이어그램

라이프 사이클 훅

뷰의 라이프 사이클을 이해해야 하는 이유는 바로 라이크 사이클 훅 때문이다.
라이프 사이클 훅으로 인스턴스의 특정 시점에서 원하는 로직을 구현할 수 있다.

예를 들어, 컴포넌트가 생성되자마자 데이터를 서버에서 받아오고 싶은경우
created나 beforeMount 라이프 사이클 훅을 사용할 수 있다.
아래 코드는 인스턴스 생성되자마자 Axios로 HTTP GET 요청을 보내 데이터를 받아오는 경우이다.

new Vue({
  methods: {
  	fetchData() {
      axios.get(url);
    }
  },
  created: function() {
  	this.fetchData();
  }
});

라이프 사이클 훅

• 자주 사용하는 라이프 사이클 훅

  • created

    인스턴스가 작성된 후 동기적으로 호출 이 단계에서 인스턴스는 데이터 처리,계산된 속성, 메 소드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료한다. 하지만 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없다.

  • beforeMount

    마운트가 시작되기 바로 전에 호출. render함수가 처음으로 호출 된다. 이 훅은 서버측 렌더링 중 호출되지 않는다.

  • mounted

    el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출된다.
    루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면,mounted가 호출 될 때 vm.$el도 문서 안에 있게 된다.

    mounted는 모든 자식 컴포넌트가 마운트 된 상태를 보장하지 않는다.
    mounted내부에서 vm.$nextTick를 사용하면 전체가 렌던링된 상태를 보장한다.

    mounted: function () {
      this.$nextTick(function () {
        // 모든 화면이 렌더링된 후 실행합니다.
      })
    }

  • destroyed

    Vue 인스턴스가 제거된 후 호출된다. 이 훅이 호출되면 Vue 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제된다.
    이 훅은 서버측 렌더링 중 호출되지 않는다.

• 라이프 사이클 훅

  • beforeCreate

    인스턴스가 방금 초기화 된 후 데이터 관찰 및 이벤트 / 감시자 설정 전에 동기적으로 호출

  • beforeUpdate

    데이터가 변경되면,가상 DOM 재 렌더링과 패치가 이뤄지기 전에 호출된다.
    이 훅에서 더 많은 상태 변경을 수행할 수 있으며 추가로 재 렌더링을 트리거하지 않는다.
    이 훅은 서버측 렌더링 중 호출되지 않는다.

  • updated

    데이터가 변경되어 가상 DOM이 재 렌더링되고 패치되면 호출된다.

    이 훅이 호출되면 엘리먼트의 DOM이 업데이트 된 상태가 되어 이 훅에서 DOM 종속적인 연산을 할 수 있다. 그러나 대부분의 경우 무한루프가 발생할 수 있으므로 훅에서 상태를 변경하면 안된다. 상태 변화에 반응하기 위해서 계산된 속성 또는 감시자를 사용하는 것이 더 좋다.

    updated 는 모든 자식 컴포넌트가 재렌더링 된 상태를 보장하지 않는다.
    updated 내부에서 vm.$nextTick를 사용하면 전체가 업데이트된 상태를 보장한다.

    updated: function() {
     this.$nextTick(function() {
       // 전체 보기를 다시 렌더링한 후에만 실행되는 코드
     }
    }

    이훅은 서버측 렌더링 중 호출되지 않는다.

  • activated

    keep-alive 인 컴포넌트가 활성화 될 때 호출된다.
    이 훅은 서버측 렌더링 중 호출되지 않는다.

  • deactivated

    keep-alive인 컴포넌트가 비활성화 될 때 호출된다
    이 훅은 서버측 렌더링 중 호출되지 않는다.

  • beforeDestory

    Vue인스턴스가 제거되기 전에 호출된다. 이 단계에서 인스턴스는 아직 완벽하게 작동한다.
    이 훅은 서버측 렌더링 중 호출되지 않는다.

  • errorCaptured

    2.5.0+에서 추가됨

    자손 컴퍼넌트로부터의 에러가 캡처되었을 때에 불린다. 오류를 트리거 한 컴포넌트 인스턴스 및 오류가 캡처된 위치에 대한 정보가 들어있는 문자열의 세 가지 전달인자를 받는다. 훅은 false를 반환하여 오류가 더 전파되지 않도록 할 수 있다.

    출처
    https://kr.vuejs.org/v2/api/index.html
    https://joshua1988.github.io/vue-camp