Vue.js
라이프 사이클 후크

Vue 1.x를위한 후크

• init

  인스턴스가 초기화 된 후 및 초기 데이터 관찰 이전에 동 기적으로 호출됩니다.

• created

  인스턴스가 작성된 후에 동 기적으로 호출됩니다. 이것은 $el 설정 이전에 발생하지만 data observation 후 computed properties , watch/event callbacks 및 methods 가 설정되었습니다.

• beforeCompile

  Vue 인스턴스를 컴파일하기 직전.

• compiled

  컴파일이 완료된 직후. 모든 directives 은 $el 이 사용 가능하기 전에 연결되어 있지만 여전히 연결되어 있습니다.

• ready

  컴파일 후 발생 및 $el 완료되고 인스턴스는 처음으로 DOM에 주입된다.

• attached

  $el 이 directive 의해 DOM에 첨부되거나 인스턴스가 $appendTo() 호출 할 때 발생합니다.

• detached

  $el 이 DOM이나 인스턴스 메소드에서 제거되거나 분리 될 때 호출됩니다.

• beforeDestroy

  Vue 인스턴스가 파손되기 직전에 완전하게 기능합니다.

• destroyed

  인스턴스가 파기 된 후에 호출됩니다. 모든 bindings 및 directives 은 이미 바인딩 해제되었으며 자식 인스턴스도 파괴되었습니다.

인스턴스에서 사용하기

모든 라이프 사이클 후크 때문에 Vue.js 단지입니다 functions 직접 인스턴스 declaraction 그들 중 하나를 배치 할 수 있습니다.

//JS
new Vue({

    el: '#example',

    data: {
        ...
    },

    methods: {
        ...
    },

    //LIFECYCLE HOOK HANDLING
    created: function() {
        ...
    },

    ready: function() {
        ...
    }

});

일반적인 함정 :`ready ()`훅에서 DOM 접근하기

ready() 후크에 대한 일반적인 사용법은 DOM에 액세스하는 것입니다 (예 : 자바 스크립트 플러그인을 시작하고 요소의 크기를 가져 오는 등).

문제

Vue의 비동기 DOM 업데이트 메커니즘으로 인해 ready() 후크가 호출 될 때 DOM이 완전히 업데이트되었다고 보장 할 수 없습니다. 이 요소는 정의되지 않았기 때문에 일반적으로 오류가 발생합니다.

해결책

이 상황에서 $nextTick() 인스턴스 메소드가 도움이 될 수 있습니다. 이 메서드는 다음 틱 이후까지 제공된 콜백 함수의 실행을 연기합니다. 즉, 모든 DOM 업데이트가 완료 될 때 호출됩니다.

예:

module.exports {
  ready: function () {
    $('.cool-input').initiateCoolPlugin() //fails, because element is not in DOM yet.
    
    this.$nextTick(function() {
      $('.cool-input').initiateCoolPlugin() // this will work because it will be executed after the DOM update.
    })
  }
}