vue lifeCycle 이용 mount() beforeUpdate()

애플코딩 - 뷰 강의

 

create 단계 : 데이터만 존재하는 단계

mount 단계 : 컴포넌트 사이에 있던걸 실제 html 바꿔줌

컴포넌트 생성 : index.html에 장착

update 단계 : data가 변하면 html이 실시간 재렌더링 됩니다.

unmount단계 : 컴포넌트 삭제되면 실시간 재렌더링

 

이 단계들의 중간마다

LifeCycle hook을 걸어서 사용 될 코드를 작성할 수 있다.

 

  mounted(){
    //mount되고 나서
    //setTimeout(function(){ // 바깥의 this를 잘 못가져옴
    setTimeout(()=>{
      this.showDiscount = false;
    },2000);
  },

  mounted(){


      setInterval(()=>{
        //1초마다 내부 코드가 실행 됌
        this.DiscountValue--;
      },1000)
    
  },
  updated(){
    if(this.DiscountValue < 1){
      this.showDiscount = false;
    }
  },

 

updated는 데이터를 수정할 경우 update가 다시 호출되기 때문에 무한 루프에 빠질 수가 있다.

 

 

    beforeUpdate(){
      if(this.month == 2){
        alert('3개월부터 가능')
        this.month = 3;
      }
    },

 

데이터를 불러오거나 수정할 때는 beforeUpdate를 사용해야 한다.

 

https://beomy.tistory.com/47