728x90
반응형
Lifecycle Hooks
: Vue 인스턴스의 생애주기 동안 특정 시점에서 실행되는 함수
-> 개발자가 특정 단계에서 의도하는 로직이 실행될 수 있도록 함
1. Vue 컴포넌트 인스턴스가 초기 렌더링 및 DOM 요소 생성이 완료된 후 특정 로직을 수행하기
<body>
<div id="app">
</div>
<script>
const { createApp, ref, onMounted } = Vue;
const app = createApp({
setup() {
onMounted(() => {
console.log("mounted");
});
return {};
},
});
app.mount("#app");
</script>
</body>
2. 반응형 데이터의 변경으로 인해 컴포넌트의 DOM이 업데이트된 후 특정 로직을 수행하기
<body>
<div id="app">
<button @click="count++">Add 1</button>
<p>Count: {{ count }}</p>
<p>{{ message }}</p>
</div>
<script>
const {
createApp,
ref,
onMounted,
onUpdated,
} = Vue;
const app = createApp({
setup() {
const count = ref(0);
const message = ref(null);
onUpdated(() => {
message.value = "updated!";
});
return {
count,
message,
};
},
});
app.mount("#app");
</script>
</body>
이외에도 다양한 hooks 함수들이 있다.
https://vuejs.org/api/composition-api-lifecycle
Lifecycle Hooks 특징
- Vue는 Lifecycle Hooks에 등록된 콜백 함수들을 인스턴스와 자동으로 연결한다.
- 이렇게 동작하려면 hooks 함수들은 반드시 동기적으로 작성되어야 한다.
728x90
반응형
'Frontend > Vue3' 카테고리의 다른 글
| [Vue3] Vue Router로 페이지 이동하기 (0) | 2024.05.08 |
|---|---|
| [Vue3] 컴포넌트 간 통신 (props, emit) (0) | 2024.05.07 |
| [Vue3] watch (0) | 2024.05.06 |
| [Vue3] 리스트 렌더링 (v-for) (0) | 2024.05.06 |
| [Vue3] 조건부 렌더링 (v-if, v-show) (0) | 2024.05.06 |
