[Vue.js] Lifecycle Hook

라이프 사이클(Lifecycle Hook)

---

vue에서 생성되는 각 단계에 해당하는 특정 이벤트가 일어나는데 그 이벤트 훅마다 지정되어 있는 함수가 있다. 어느시점에 만들어지고 사용되는지 알아본다. 완벽하게 이해할 필요는 없다. 하지만 어느정도는 알고있어야한다.

 

beforeCreate

인스턴스가 초기화 된 직후, 데이터 관찰 및 이벤트/감시자(watcher) 설정 전에 동기적으로 호출됩니다.

인스턴스가 초기화되면 props 설정을 처리한 후 data() 또는 computed 같은 다른 옵션을 처리하기 직전에 호출됩니다.

 

created

인스턴스가 생성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 data 관찰, computed 속성, methods, watch/이벤트 콜백 등의 설정이 준비되었음을 의미하는 옵션 처리를 완료합니다. 그러나 마운트 단계가 시작되지 않았으며, $el 속성을 사용할 수 없습니다.

data(), watch, computed, methods 정보를 모두 가지고 준비가 끝난 상태

참고
일반적으로 화면이 열림과 동시에 서버에서 정보를 가져와야 하는경우 mounted에 코드작성을 합니다. 그러나 서버에서 정보를 가져와 dom요소를 구성을 많이 해야하면 mounted와 created에 나눠서 가져옵니다. 이유는 mounted에 전부 작성하면 화면에서 dom요소가 구성된 이후에 하나씩 dom요소의 데이터를 채워 넣을것입니다. 즉, 사용자가 기다리게 됩니다. 그래서 화면상단에 들어가는(사용자가 바로보는) 데이터 같은경우는 created에 작성하면 좋습니다. 데이터를 먼저 가져오고 mounted를 거쳐 dom이 구성됩니다. 그렇다고 전부 created에 데이터를 가져오면 화면이 하얗게 렌더링되지 않는 시간이 길어질수 있습니다.

 

beforeMount

마운트가 시작되기 직전에 호출됩니다. render 함수가 처음으로 호출됩니다.

반응 상태 설정(v-for, v-if등등)을 완료를 했지만, 아직 DOM 노드가 생성되지 않은 상태.

 

mounted

인스턴스가 마운트된 후 호출되며, 여기서 Vue.createApp({}).mount()로 전달된 엘리먼트는 새로 생성된 vm.$el로 대체됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트되어 있으면, mounted가 호출될 때 vm.$el도 문서에 포함(in-document)됩니다. mounted는 모든 자식 컴포넌트가 마운트되었음을 보장하지 않습니다. 전체 화면내용이 렌더링될 때까지 기다리려면, mounted 내에서 vm.$nextTick를 사용합니다.

실제 DOM이 랜더링이 끝난 상태입니다. 예를들면 로직이 dom에 접근하는 코드면 created나 beforeMount 안에 코드를 작성하면 동작하지 않습니다. 즉 DOM에 접근하고싶으면 mounted시점 이후에 접근해야합니다.

참고
예제를 보면 1초마다 함수 호출 다른 화면(페이지)로 이동해도 계속 실행이 된다. 그 이유는 SPA이므로 화면의 HTML이 바뀌어지는 방식으로 vue는 작동하는데 종료를 해주지 않았기 때문이다. 이를 위해 unmounted에 종료를 해줘야 한다.

 

beforeUpdate

DOM이 패치되기 전에 데이터가 변경될 때 호출됩니다. 이 훅은 업데이트 전에 기존 DOM에 접근 (예: 수동으로 추가된 이벤트 리스너를 제거)할 수 있는 좋습니다. 초기 렌더링만 서버측에서 수행되기 때문에, 이 훅은 서버측 렌더링 중 호출되지 않습니다.

data 변경으로 인해 DOM을 업데이이트 하기 직전 상태.

 

updated 

데이터가 변경되어 가상 DOM이 다시 렌더링되고 패치된 후에 호출됩니다. updated가 호출될 때 컴포넌트의 DOM이 업데이트되므로, 여기에서 DOM의 종속적인 연산(DOM-dependent operations)을 할 수 있습니다. 그러나 대부분의 경우 훅 내부에서 상태를 변경하지 않아야 합니다. 상태 변경에 반응하기 위해, 일반적으로 computed property 속성이나 watcher를 사용하는 것이 더 좋습니다. updated는 모든 하위 컴포넌트가 다시 렌더링되었음을 보장하지 않습니다. 전체 화면이 재렌더링 될 때까지 기다리려면, updated 내부에서 vm.$nextTick를 사용합니다:

DOM이 업데이트 된 후에 호출

 

beforeUnmount

컴포넌트 인스턴스가 마운트 해제(unmounted) 되기 직전에 호출됩니다. 이 단계에서 인스턴스는 여전히 완전하게 작동합니다.

현재 컴포넌트를 빠져 나가기 직전

 

unmounted

컴포넌트 인스턴스가 마운트 해제(unmounted)된 후 호출됩니다. 이 훅이 호출되면, 컴포넌트 인스턴스의 모든 디렉티브가 바인딩 해제되고, 모든 이벤트 리스너가 제거되며, 모든 자식 컴포넌트 컴포넌트도 마운트 해제(unmounted)됩니다.

현재 컴포넌트를 빠져 나갈 때

참고
힙메모리(배열, 오브젝트)에 데이터가 들어있으므로 null을 넣어 가비지콜랙터가 지우기 쉽게 null을 할당. 스택메모리(문자열, 숫자, 불리언 등)는 괜찮음

 

예제

<template>
  <div>
    <div>{{ sampleData }}</div>
    <div>
      <label for="">태어난 도시는?</label>
      <select name="" id="">
        <option value="" :key="city.code" v-for="city in cities">
          {{ city.title }}
        </option>
      </select>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      sampleData: '',
      cities: [],
      fnInterval: null
    }
  },
  //   props: {

  //   },
  setup() {},
  beforeCreate() {},
  created() {
    this.getCityList()
  },
  beforeMount() {},
  mounted() {
    this.fnInterval = window.setInterval(() => {
      console.log('aaaa')
    }, 1000)
  },
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {
    window.clearInterval(this.fnInterval)
    this.fnInterval = null
    this.cities = null
  },
  methods: {
    getCityList() {
      this.cities = [{ code: '02', title: '서울' }]
    }
  }
}
</script>

 

라이프 사이클 다이아그램(Vue3)

아래는 인스턴스 라이프사이클에 대한 다이어그램입니다. 지금 당장 모든 것을 완전히 이해할 필요는 없지만 다이어그램은 앞으로 도움이 될 것입니다.

Vue3 라이프 사이클 다이아그램

참고자료

https://v3.ko.vuejs.org/api/options-lifecycle-hooks.html