vue의 라이프사이클

이렇게 생긴, 할인베너를 등장하고 2초 후에 사라지게 만들면서 라이프사이클에 대해 배워보자.

 

우리가 만드는 <컴포넌트>들은 웹에 표시되기까지 일련의 step을 거치는데, 

create스텝 - mount스텝- 컴포넌트 생성을 한다.

이 중간중간 hook을 걸어서 mount되기 전 이것 좀 실행해주세요 이런 식으로 걸 수 있다.

export default {
  name: 'App',
  data() {//데이터 보관함
    return {
      
    }
  },
  methods : {
    
  },
  mounted() {
    //mount되고 나서 뭔가 실행할 떄
  },
  components: {
    Discount : Discount,
    Modal : Modal,
    Card : Card,
  }
}

이렇게, mounted되고 나서 실행할 코드를 쓰고, 다른 lifecycle hook들도 함수형으로 써주면 된다.

lifecycle hook들은 boforeCreate,created이렇게 mount, update, unmount등등이 있다.

 

이제, 2초 후에 Discount라는 컴포넌트가 사라지게 해보자.

데이터보관함에 showDiscount라는 이름으로 true값을 저장해놓고,

showDiscount : true,

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

이런 식으로, true일때만 나타나게 즉, false로 바뀌면 사라지게 만들고, 2초 후 false로 바꿔주면 된다.

mounted() {
    //mount되고 나서 뭔가 실행할 떄
    setTimeout(() => {
      this.showDiscount = false;
    },2000);
  },

그래서 이렇게, mounted를 써서 mount가 되고 나서, 2초 후, showDiscount 값을 false로 바꿔주면 된다.