vue 생명주기

오늘은 vue의 생명주기에 대해 알아보겠읍니다.

vue의 생명주기

Vue의 생명주기는 크게 4단계입니다.

인스턴스 생성 > 템플릭과 가상 DOM 생성 > 이벤트 루프 > 인스턴스 소멸

인스턴스 생성

• 인스턴스를 생성할 때 vue는 뷰 - 모델에서 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트를 생성하여 초기화합니다.

템플릿과 가상 DOM 생성

• vue가 템플릿 혹은 렌더링 함수를 찾아 템플릿을 컴파일합니다.
  가상 DOM 복사본을 만들고 그 결과를 HTML DOM에 마운트합니다.

이벤트 루프

• 이벤트 루프중에 관찰자는 뷰 - 모델의 데이터를 감시합니다.
  변화가 있으면 가상 DOM이 다시 렌더링되어 HTML DOM에 적용됩니다.

인스턴스 소멸

• 앱이 소멸되기 시작하면 완전히 소멸되기 전에 모든 관찰자, 이벤트 리스너, 자식 컴포넌트들이 삭제됩니다.

이 각각을 확인할 수 있는 생명주기 훅도 있습니다!

생명주기 Hook

beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestroy -> destroyed

이 부분을 확인하기 위해 코드를 실행해보도록 하겠습니다.

var APP_LOG_LIFECYCLE_EVENTS = true;

var webstore = new Vue({
  el: "#app",
  data: {
    sitename: "Vue.js 애완용품샵",
  },
  beforeCreate: function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("beforeCreate");
    }
  },
  created: function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("created");
    }
  },
  beforeMount: function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("beforeMount");
    }
  },
  mounted:  function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("mounted");
    }
  },
  beforeUpdate:  function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("beforeUpdate");
    }
  },
  updated:  function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("updated");
    }
  },
  beforeDestroy:  function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("beforeDestroy ");
    }
  },
  destroyed:  function() {
    if (APP_LOG_LIFECYCLE_EVENTS) {
      console.log("destroyed");
    }
  }
});

이 경우 실행결과는 다음과 같습니다.

beforeCreate
created
beforeMount
mounted

만약 여기서 sitename을 바꾼다면

beforeUpdate, updated가 실행되게 됩니다.

또 $destory 를 이용하면
beforeDestory, destroyed가 순차적으로 실행되게 됩니다.

출처
https://github.com/gilbutITbook/007024/blob/master/chapter-02/life-cycle-hooks.js