[Vue.js] 라이프사이클

[라이프사이클]

<컴포넌트>는 웹페이지에 표시도기 전까지 step이 있음.

create 단계 -> mount 단계 -> 컴포넌트 생성

create 단계 : 데이터만 존재
mount 단계 : template 사이에 있던걸 실제 HTML로 바꿔줌
컴포넌트 생성 : index.html에 장착
update 단계 : data가 변하면 HTML이 재렌더링

이걸 왜 배우는가?
컴포넌트의 생성 과정에서 중간마다 Hook을 걸 수 있음.스프링의 filter 느낌이 듬..
ex) 컴포넌트가 업데이트, 랜더링이 되기 전에 실행시켜주세요.

Lifecycle Hook 쓸려고 배운 것

beforeCreate() 
created() //html 생성전 -> 서버에서 데이터가져올 때 쓰면 좋을 듯
beforeMount() // mount 되기 전
mounted() // 컴포넌트가 mount 되고 나서 실행시키고 싶을 때
beforeUpdate() // 컴포넌트가 업데이트 되기 전 실행하고 싶을 때
updated()
beforeUnmount()
unmounted()

문제 : 2초 후에 UI를 지워야 한다면?

초기값 showDiscount = true;

App.vue에 mount()를 사용하면 App.vue가 mount 되고 나서 코드를 실행해주는데
mount 되고 나서 2초후 사라지게 해야하니까

---

숙제
문제 : 1초마다 30% 할인을 1초마다 1%씩 감소, 0이되면 멈춤

data에 amount를 추가해주고
감소시켜주면 끝

setInterval(() => {}, 초 지정); : 지정한 시간마다 내부 코드 실행

cleareInterval() : setInterval() 함수에 의해 실행되는 반복 작업을 종료하는 함수

---

숙제
문제 : 모달창의 input 안에 2를 기입했을 때 알립창을 띄우게 하기 위함

input 에 값을 넣으면 재렌더링 되는것이 핵심
업데이트 되기 전에 훅을 걸면 됨.

업데이트 되기 전 사용하는 훅 beforUpdate