[Vue.js] Lifecycle 과 hook 을 활용한 데이터 수정

✔️ Lifecycle Diagram

 

Vue.js 의 Lifecycle 은 

CREATE 단계 → MOUNT 단계 → 컴포넌트 생성   → UPDATE 단계   → UNMOUNT 단계  

를 거친다. 이 중간에 hook 을 걸어서 액션을 취할 수도 있다.

 

예를 들어서 배너 하나가 띄워진 후에 mount 된 2초 후에 배너를 없애고 싶다면

 

  data() {
    return {
      onerooms_original: [...data],
      onerooms: data,
      user_clicked: 0,
      modal_status: false,
      discount_status: true,
      menus: ['Home', 'Shop', 'About'],
      warn_count: [0, 0, 0, 0, 0, 0]
    }
  },

 

discount_status 배너의 상태를 나타내는 변수를 생성해준 다음,

  <Discount v-if="discount_status == true" />

 

discount_status 가 true 일 때만 Discount Component 가 나오도록 설정해준다.

 

  mounted() {
    setTimeout(()=> {
      this.discount_status = false;
    }, 2000);
  },

 

이후 mounted 를 만든다음, 2초 후에 discount_status 를 false 로 만드는 로직을 작성한다.

 

mounted 이외에 위처럼 시점을 지정할 수 있다.