[Vue.js] Lifecycle Hooks

1. 생명주기

 

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다.

 

그 과정에서 생명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행된다.

 

 

 

setup, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted 등의 Lifecycle hook이 존재한다.

 

이 중에서 setup, mounted, updated, unmounted 정도는 기억하고 있자.

 

---

2. Lifecycle hooks 등록하기

 

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`컴포넌트가 마운트 됐습니다.`)
})
</script>

가장 일반적으로 사용되는 훅은 onMounted, onUpdated, onUnmounted가 있다.

 

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`컴포넌트가 마운트 됐습니다.`)
})
</script>

import { createApp, onMounted } from 'vue'

const app = createApp({
    onMounted() {
        console.log('컴포넌트가 마운트 됐습니다.')
    }
})
app.mount('#app')

 

---