19. 뷰 인스턴스 라이프사이클

Vue.js instance는 라이프사이클을 지나가게된다.(생명주기)

생명주기 : vue 인스턴스가 태어나서 일을겪고 죽을때까지.

 

 

1. beforeCreate : 인스턴스가 생성되기 전

-> data에 접근이 불가능하다. 그래서 undefined가 뜬다.

<script>
export default {
 data(){
  return {
   name: 'Kossie Coder',
  }
 },
 beforeCreate(){
  console.log('beforeCreate',this.name);// data에 접근불가. undefined가 뜬다.
 }
}
</script>

 

2. Created

인스턴스가 생성이 되었기때문에 data에 접근이 가능해진다.

인스턴스가 생성되었기때문에 this에 접근 가능.(이건 정확하게 무슨말인지 잘 모르겠다.)

보통 서버에 요청을 보내서 응답을 받아온 데이터를  data에 업데이트 해줄때 created에서 많이 한다.

mounted에서 하는 경우도 많은데, created에서 서버 요청 많이 보낸다.

 

3. beforeMount : DOM이 마운트 되기 전.

beforeMount(){
 alert('beforeMount');
}

아직 <div id="app"></div> 안은 비어있다.

 

 

4. mounted : DOM이 마운트 된 후.

여기서는 <div id="app"></div> 안이 채워진다.

여기서부터 dom에 접근이 가능해진다.

DOM을 control하고싶으면 mounted 훅에서 하면 된다.

mounted(){
 alert("mounted");
}

 

확인을 누르면 화면에 정보들이 보이게된다.

 

5. beforeUpdate

- data가 update되기 전.

<template>
 <div>
  <button @click="updateName">Submit</button>
  {{ name }}
 </div>
</template>
<script>
export default {
 data(){
  return {
   name: "Kossie Coder",
  }
 },
  beforeUpdate(){
   alert("beforeUpdate");
  },
  updated(){
   alert("updated");
  }
 }
</script>

- 'Submit'을 누르면 alert('beforeUpdate')가 뜬다.

 

 

5. updated

- data가 update된 후. 

- alert의 확인 클릭 후 Kossie Coder -> hello로 변경된다.

 

 

 

Home페이지 -> About 페이지로 넘어가게되면 HomeView.vue 컴포넌트가 사라지고 AboutView.vue컴포넌트가 들어오게 된다. 그러면서 beforeDestroy, destroyed 훅이 실행된다.

6. beforeDestroy

- instance 사용이 끝나고, instance가 없어지기 전에.

 

- beforeDestory훅에서는 나갈때 메모리 누수 방지를 위해서 event listener가 있으면 없애준다던지, 데이터를 초기화해준다던지.

 

7. destroy

- instance가 완전히 사라지고 난 이후

 

 

** 모든 내용의 출처는 Kossie Coder입니다.