09. Vue.js의 라이프사이클

 

2024. 03.17

회사에서 JSP -> Vue.js로 갈아탈 준비 중에 있다.

코어 CRUD 개발을 진행 중인데, Vue.js 를 거의 1년 만에 다시 하니 기억이 가물가물하다.

Vue에서 가장 중요한건 라이프 사이클이라 생각하며, 다시 암기하기 위해 기록해 놓는다.

---

• Vue.js의 라이프사이클은 Vue 인스턴스가 생성되고 소멸될 때 발생하는 일련의 이벤트들을 의미.
• Vue 인스턴스의 라이프사이클은 크게 생성 단계, 갱신 단계, 소멸 단계로 나뉜다. 각 단계에서는 특정한 라이프사이클 훅(method)들이 호출.
  
  

1. 생성 단계(Lifecycle Hooks during Creation):
   - beforeCreate: Vue 인스턴스가 초기화되고 데이터가 준비되기 전에 호출된다.
   - created: Vue 인스턴스가 생성된 직후 호출,. 데이터에 접근 가능하지만 템플릿과 가상 DOM은 마운트되기 전이다.
   
   
2. 갱신 단계(Lifecycle Hooks during Updates):
   - beforeMount: Vue 인스턴스가 가상 DOM에 마운트되기 전에 호출된다.
   - mounted: Vue 인스턴스가 가상 DOM에 성공적으로 마운트된 후에 호출된다.
   - beforeUpdate: 데이터가 변경되고 가상 DOM이 다시 렌더링되기 전에 호출된다.
   - updated: 데이터가 변경되고 가상 DOM이 다시 렌더링 된 후에 호출된다.
   
   
3. 소멸 단계(Lifecycle Hooks during Destruction):
   - beforeDestroy: Vue 인스턴스가 소멸되기 직전에 호출됩니다. 아직 인스턴스에 접근 가능.
   - destroyed: Vue 인스턴스가 소멸된 후에 호출됩니다. 모든 이벤트 리스너가 제거되고 모든 하위 Vue 인스턴스도 소멸.

 

• 예제 소스(consolo.log 찍히는 것으로 호출이 언제 되는지 체크)

<template>
  <div>
    <!-- 데이터를 출력하는 예시 템플릿 -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 데이터 속성으로 메시지를 정의합니다.
      message: 'Hello Vue!'
    };
  },
  // Vue 라이프사이클 훅들을 구현합니다.
  beforeCreate() {
    // 컴포넌트가 생성되기 전에 호출됩니다.
    console.log('Before Create Hook');
  },
  created() {
    // 컴포넌트가 생성된 후에 호출됩니다.
    console.log('Created Hook');
  },
  beforeMount() {
    // 컴포넌트가 화면에 마운트되기 전에 호출됩니다.
    console.log('Before Mount Hook');
  },
  mounted() {
    // 컴포넌트가 화면에 마운트된 후에 호출됩니다.
    console.log('Mounted Hook');
  },
  beforeUpdate() {
    // 데이터가 변경되고 화면이 갱신되기 전에 호출됩니다.
    console.log('Before Update Hook');
  },
  updated() {
    // 데이터가 변경되고 화면이 갱신된 후에 호출됩니다.
    console.log('Updated Hook');
  },
  beforeDestroy() {
    // 컴포넌트가 파괴되기 전에 호출됩니다.
    console.log('Before Destroy Hook');
  },
  destroyed() {
    // 컴포넌트가 파괴된 후에 호출됩니다.
    console.log('Destroyed Hook');
  }
};
</script>

<style scoped>
/* 스타일을 여기에 작성할 수 있습니다. */
</style>