인스턴스와 라이플사이클 예제

참고 문서

https://v3.vuejs.org/guide/instance.html#lifecycle-hooks

Application & Component Instances | Vue.js

 

실습 진행을 위해 기존에 작성한 vue3 템플릿을 받아서 사용한다.

참고: NPX, Degit :: step 1 (tistory.com)

NPX, Degit

 

받은 후에 npm i로 필요한 패키지를 받아준다.

 

기존의 src -> app.vue 파일 내부에 코드를 제거해준다.

 

아래 코드 작성

<template>
  <h1>{{count}}</h1>
</template>

<script>
export default {
  data(){
    return {
      count: 2
    }
  },
  // created 동작 전에 실행, data가 정의 되기전에 동작, 컴포턴트가 생성되기 전
  beforeCreate(){
    console.log('Before Create!', this.count);
  },
  // 컴포넌트가 생성된 직후에 자동으로 동작, data가 정의 된 후에 동작
  created() {
    console.log('Created!', this.count);
    console.log(document.querySelector('h1'));
  },
  // Html과 연결되기 전에 동작
  beforeMount(){
    console.log('Befored Mount!');
    console.log(document.querySelector('h1'));
  },
  // Html과 연결이 된 직후에 동작
  mounted() {
    console.log('Mounted!');
    console.log(document.querySelector('h1'));
  }
}
</script>

터미널에서 npm run dev 명령어로 브라우저에서 확인

 

created() 와 mounted()를 자주 사용할 수도 있을 것 같다.

 

created(): 컴포넌트가 생성된 직후에 동작 하기 때문에 data를 호출할 수 있다.

하지만 Html이 연결되기 전에 동작하므로 Html 구조를 호출 할 수는 없다.

 

mounted(): Html이 연결된 직후에 동작, data는 물론 Html의 구조를 가져올 수 있다.