[Vue.js] Vue LifeCycle

Vue의 라이프사이클

beforeCreate()

인스턴스 생성 전에 실행됨

export default {
  data() {
    return {
      name: 'LEE',
    }
  },
  beforeCreate() {
    console.log('beforeCreate', this.name);
    // 결과
    // beforeCreate undefined
  },
}

created()

인스턴스 생성 시 실행되며 this로 state 접근가능
보통 이 때 서버요청을 함 (mounted에서 하는 경우도 있음)

export default {
  data() {
    return {
      name: 'LEE',
    }
  },
  created() {
    console.log('created', this.name);
    // 결과
    // created LEE
  },
}

beforeMount()

DOM 마운트 이전에 실행됨

마운트란?

컴포넌트가 생성되고 DOM에 주입되는 것을 말하며 처음 한 번만 실행됨

export default {
  beforeMount() {
    alert('beforeMount');
    // 결과
    // DOM 마운트 되기 전에 alert 발생
  },
}

mounted()

마운트 시 실행됨
DOM을 컨트롤하고 싶은 경우 사용

export default {
  mounted() {
   	alert('mounted');
    // 결과
    // beforeMount 이후에 DOM 마운트 된 후 alert 발생
  },
}

beforeUpdate()

state 업데이트 전에 실행됨

export default {
  data() {
    return {
      name: 'LEE',
    }
  },
  methods: {
    updateName() {
      this.name = 'CHOI';
    }
  },
  beforeUpdate() {
    alert('before update');
    // 결과
    // updateName 함수를 실행하는 경우
    // 함수 실행 이전에 alert 발생 (name 값 아직 LEE)
  },
}

updated()

state 업데이트 시 실행됨

export default {
   data() {
    return {
      name: 'LEE',
    }
  },
  methods: {
    updateName() {
      this.name = 'CHOI';
    }
  },
  updated() {
    alert('updated');
    // 결과
    // updateName 함수를 실행하는 경우
    // 함수 실행 후 alert 발생 (name 값 CHOI로 변한 후)
  },
  },
}

beforeDestroy()

인스턴스 소멸 전에 실행됨

export default {
  beforeDestroy() {
    alert('beforeDestroy');
    // 결과
    // 다른 페이지로 이동 등의 이벤트 발생 시
    // 현재 보이는 컴포넌트가 소멸되기 전에
    // alert 발생
  },
}

destroyed()

인스턴스 소멸 이후 실행됨
메모리 누수 방지를 위해 data를 초기화하거나 event 삭제 등의 코드를 작성함

export default {
  destroyed() {
    alert('destroyed');
    // 결과
    // 다른 페이지로 이동 등의 이벤트 발생 시
    // 현재 보이던 컴포넌트 사라지고
    // alert 발생, 다른 페이지 렌더링
  },
}