[콜럼Vue스] 생명주기 훅(Life Cycle Hook)

참고자료 : 원쌤의 퀵 Vue.js

---

1. Option API의 생명주기 훅

export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  // 컴포넌트가 생성되기 직전에 호출됨
  beforeCreate() {
    console.log('beforeCreate')
  },
  // 컴포넌트가 생성된 후 호출됨
  created() {
    console.log('created')
  },
  // DOM에 컴포넌트가 마운트되기 직전에 호출됨
  beforeMount() {
    console.log('beforeMount')
  },
  // DOM에 컴포넌트가 마운트된 후 호출됨
  mounted() {
    console.log('mounted')
  },
  // 데이터가 변경되기 직전에 호출됨
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  // 데이터가 변경된 후 호출됨
  updated() {
    console.log('updated')
  },
  // 컴포넌트가 파괴되기 직전에 호출됨
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  // 컴포넌트가 파괴된 후 호출됨
  destroyed() {
    console.log('destroyed')
  }
}

Option API의 생명주기 훅 요약

• beforeCreate: 컴포넌트가 생성되기 직전에 호출된다. data와 methods에 아직 접근할 수 없다.
• created: 컴포넌트가 생성된 후 호출된다. data, computed, methods에 접근 가능하다.
• beforeMount: 가상 DOM이 처음으로 컴파일된 후, 컴포넌트가 실제 DOM에 마운트되기 직전에 호출된다.
• mounted: 컴포넌트가 DOM에 마운트된 후 호출된다.
• beforeUpdate: 반응형 데이터가 변경되었을 때, DOM이 다시 렌더링되기 직전에 호출된다.
• updated: DOM이 다시 렌더링된 후 호출된다.
• beforeDestroy: 컴포넌트가 파괴되기 직전에 호출된다.
• destroyed: 컴포넌트가 파괴된 후 호출된다.

---

2. Composition API의 생명주기 훅

<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

onBeforeMount(() => {
  console.log('onBeforeMount')
})

onMounted(() => {
  console.log('onMounted')
})

onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})

onUpdated(() => {
  console.log('onUpdated')
})

onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})

onUnmounted(() => {
  console.log('onUnmounted')
})
</script>

Composition API의 생명주기 훅 요약

• onBeforeMount: 컴포넌트가 DOM에 마운트되기 직전에 실행된다.
• onMounted: 컴포넌트가 DOM에 마운트된 후 실행된다.
• onBeforeUpdate: 반응형 데이터가 변경되어 DOM이 업데이트되기 직전에 실행된다.
• onUpdated: DOM이 업데이트된 후 실행된다.
• onBeforeUnmount: 컴포넌트가 DOM에서 제거되기 직전에 실행된다.
• onUnmounted: 컴포넌트가 DOM에서 제거된 후 실행된다.