Lifecycle Hook

Lifecycle

각각의 vue 컴포넌트 인스턴스는 생성되고 소멸될 때 사전에 정의된 몇 단계의 과정을 거치게 되는데 이를 라이프사이클이라고 한다

Lifecycle 다이어그램

Lifecycle Hook

• 라이프사이클 단계에서 사용자가 자신의 코드를 추가할 수 있는 단계별 기능
• 라이프사이클 훅은 setup() 함수 내에서 동기적으로 호출
• Creation(생성) → Mounting(장착) → Updating(수정) → Destruction(소멸)

Creation

• 컴포넌트 초기화 단계
• 아직 컴포넌트가 DOM에 추가되기 전이므로 DOM에 접근할 수 없다.

beforeCreate

• 컴포넌트 인스턴스가 초기화 될 때 실행

created

• 컴포넌트 인스턴스가 초기화를 완료한 후 호출되는 훅

setup

• Option API 훅보다 먼저 호출
• beforeCreate와 created 라이프사이클 훅은 Options API에서 사용하는 라이프사이클 훅으로 Vue3 Composition API를 활용하여 개발을 진행할 때는 setup() 함수로 대체

Mounting

• DOM에 컴포넌트를 삽입하는 단계

onBeforeMount

• 컴포넌트가 마운트되기 직전에 호출

onMounted

• 컴포넌트가 마운트 된후 호출
• DOM에 접근 가능
• 모든 자식 컴포넌트가 마운트됨
• 자체 DOM 트리가 생성되어 상위 컴포넌트에 삽입

Updating

• 컴포넌트에서 사영되는 반응형 데이터가 변경되거나 어떠한 이유로 재렌더링이 발생될 때 호출

onBeforeUpdate

• 반응형 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트하기 직전에 호출

onUpdated

• 반응 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트한 후에 호출

Destruction

• 컴포넌트 해체 단계

onBeforeUnmount

• 컴포넌트 마운트 해제되기 직전에 호출

onUnmounted

• 컴포넌트 마운트 해제된 후 호출

예제

<template>
  <div class="container py-4">
    <input ref="inputRef" type="text" value="hello" />
    <hr />
    <button @click="visible = !visible">toggle</button>
    <LifeCycleChild v-if="visible"></LifeCycleChild>
    <p id="message">{{ message }}</p>
  </div>
</template>

<script>
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, ref } from "vue";
import LifeCycleChild from "./LifeCycleChild.vue";

export default {
  components: {
    LifeCycleChild,
  },
  setup() {
    // console.log("setup");

    const inputRef = ref(null);
    const message = ref("");
    const visible = ref(false);

    // onBeforeMount(() => {
    //   console.log("onBeforeMounted");
    // });
    // onMounted(() => {
    //   console.log("onMounted", inputRef.value.value);
    // });

    // onBeforeUpdate(() => {
    //   console.log("onBeforeUpdate ", message.value);
    //   console.log("DOM : ", document.querySelector("#message").textContent);
    // });

    // onUpdated(() => {
    //   console.log("onUpdated ", message.value);
    //   console.log("DOM : ", document.querySelector("#message").textContent);
    // });
    return { inputRef, message, visible };
  },
  // data() {
  //   return {
  //     dataMessage: "data message",
  //   };
  // },
  // beforeCreate() {
  //   //컴포넌트가 초기화 될 때 실행되는 훅
  //   console.log("beforeCreated", this.dataMessage);
  // },
  // created() {
  //   console.log("Created", this.dataMessage);
  // },
};
</script>

<style lang="scss" scoped></style>

<template>
  <div class="card">
    <div class="card-body">Lifecycle Child</div>
  </div>
</template>

<script>
import { onBeforeMount, onBeforeUnmount, onMounted, onUnmounted } from "vue";

export default {
  setup() {
    // console.log("Child setup");
    onBeforeMount(() => {
      console.log("Child onBeforeMount");
    });
    onMounted(() => {
      console.log("Child onMounted");
    });
    onBeforeUnmount(() => {
      console.log("Child onBeforeUnmount");
    });
    onUnmounted(() => {
      console.log("Child onUnmounted");
    });
    return {};
  },
};
</script>

<style lang="scss" scoped></style>