[vue] 라이프 사이클

1. 컴포넌트를 보여줄 때 create -> mount 이 단계로 생성된다.

   create는 데이터생성, mount는 index.html 파일에 장착 이렇게 생각하면 됨.

created(){
	서버에서 데이터 가져오는 코드~~
}

2. 데이터가 바뀌어서 컴포넌트가 재렌더링될 때는 update 단계를 거친다.
3. 다른페이지로 이동하거나 그럴 때 컴포넌트가 삭제될 때는 unmount 라는 단계를 거칩니다.

이 단계들 중간중간에 코드를 실행시키고 싶을 때가 있다.
예를 들면 mount 되기 전에 ajax 요청으로 서버에서 데이터를 가져오거나, update 되기 전에 코드를 실행해서 데이터를 검증해보거나 !

그럴 때 lifecycle hook을 골라서 쓰면 된다.

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()

data(){
  return {
  
  }
},
mounted(){
  어쩌구~
}

만약 모달창 내에 input이 있는데 여기에 2를 기입했을 때 알림창 alert() 을 띄우려면?

<template>
  <div class="black-bg" v-if="모달창열렸니 == true" >
      <input v-model="date">
  </div>
</template>

<script>
export default {
  name:'ModalPage',
  data(){
    return{
      date:1,
    }
  },
  
  beforeUpdate(){
    if (this.date == 2){
      alert('2 기입은 안됩니다!');
      
    }
  }
</script>