Vue js Life cycle 라이프 사이클

SPA를 구현하기 위해서는,
해당 프레임워크의 라이프 사이클을 이해하는 것이 필요하다.

아래는 Vue.js의 라이프사이클 다이어그램이다.
간단히 분류하면 총 4가지로 나눌 수 있다.

1. Create
2. Mount
3. Update
4. Destroy
   

   

---

Create

가장 먼저 실행된다. 이 단계에서 실행되는 라이프 사이클 훅은 DOM에 컴포넌트들이 추가되기 전이어서, DOM에 접근한다거나 this.$el을 사용할 수 없다. Create 단계에서 호출되는 훅들은 beforeCreate, created이다.

1. beforeCreate

가장 먼저 실행되는 훅이다. data, event($on, $off, $once, $emit), 감시자($watch)의 설정이 되기 이전에 호출되는 훅이다.

2. created

data, computed, methods, watch 등의 옵션 설정이 완료된 후 실행된다.
data 등을 사용할 수 있다.
$el은 마운트 이전이므로 사용할 수 없다.

Mount

컴포넌트가 DOM에 추가될 때 실행된다.
서버 사이드 렌더링은 지원하지 않는다.
렌더링이 될 때 DOM을 변경하고 싶을 때 사용하는 라이프 사이클 훅이다.
Mount 단계에서 호출되는 훅들은 beforeMount, mounted가 있다.

1. beforeMount

컴포넌트가 DOM에 추가되기 직전에 실행된다.
서버 사이드 렌더링은 지원하지 않는다.
사실상, 컴포넌트 초기에 data가 세팅되어야 하면 created훅을 사용하고,
렌더링 이후 DOM을 변경해야 한다면 mounted훅을 사용하므로 거의 사용하지 않는 훅이다.

2. mounted

컴포넌트가 DOM에 추가된 후 호출되는 훅이다.
서버 사이드 렌더링은 지원하지 않는다.
$el을 사용하여 DOM에 접근할 수 있다.
mounted훅이 호출되었다고해서 모든 컴포넌트가 마운트 된 것으로 간주하여서는 안 된다.
전체가 렌더링이 된 상태를 보장받고 싶다면, $nextTick을 사용해야 한다.

//mounted의 사용 방법
export default {
  mounted() {
    // $el 을 사용할 수 있다.
    console.log('mounted', this.$el);
    this.$nextTick(() => {
      // 모든 화면이 렌더링된 후 호출된다.
    });
  }
}

주의사항
자식 컴포넌트의 mounted가 부모 컴포넌트의 것 보다 먼저 실행된다!

//부모와 자식 컴포넌트의 mounted 호출 순서 예제
const Child = {
  template: '&ltdiv>Child&lt/div>',
  mounted() {
    console.log('Child Component Mounted');
  }
}

new Vue({
  el: '#app',
  mounted() {
    console.log('Parent Component Mounted');
  },
  components: {
    Child
  }

/*
결과는
"Child Component Mounted"
"Parent Component Mounted"
*/
});

Update

컴포넌트에서 사용되는 속성들이 변경되는, 혹은 컴포넌트가 rerender 되면 실행되는 훅이다.
컴포넌트가 rerender 될 때, 변경된 값으로 어떤 작업을 해야할 때 유용하게 사용한다.
서버 사이드 렌더링은 지원하지 않는다.

beforeUpdate

DOM이 rerender 되기 직전에 호출되는 훅이다.
업데이트 된 값을 갖고 있는 상태이므로,
해당 값을 이용하여 다른 값들을 업데이트 할 수 있다.
이 훅에서 값이 변경되더라도 다시 beforeUpdate가 호출되지는 않는다.
stack overflow의 늪에 빠질 일은 없다.

updated

DOM이 rerender 된 후 호출되는 훅이다.
DOM이 변경된 이후의 상태를 이용해야 할 때 유용하다.
mounted 훅과 마찬가지로 rerender가 끝났다는 것을 보장받은 상태에서 작업하려면 $nextTick을 사용해야 한다.
beforeUpdate와는 달리, updated에서 data를 수정하면 update가 호출되므로 무한 루프에 빠질 수도 있다!

Destroy

컴포넌트가 제거될 때 실행된다.

beforeDestroy

컴포넌트가 제거되기 직전에 호출된다.
이 훅에서는 컴포넌트들이 본래의 기능들을 가지고 있는 상태이다.
이벤트 리스너를 해제하거나 컴포넌트에서 동작으로 할당받은 자원들을 해제해야할 때 사용하기 적합한 훅이다.
서버 사이드 렌더링은 지원하지 않는다.

destroyed

컴포넌트가 제거된 후 호출된다.
컴포넌트의 모든 이벤트리스너와 디렉티브(v-model, v-show 등)의 바인딩이 해제되고, 하위 컴포넌트도 모두 제거된다.
서버 사이드 렌더링을 지원하지 않는다.