https://v3.ko.vuejs.org/guide/instance.html#라이프사이클-훅

// App.vue
<template>
  <h1>{{ count }}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 2
    }
  },
  beforeCreate() {
    console.log('beforeCreate', this.count) // undefined. why? 컴포넌트가 생성되기 직전이기 때문이다.
  },
  created() {
    console.log('Created', this.count) // 2. why? 컴포넌트가 생성된 직후이기 때문이다.
    console.log(document.querySelector('h1')); // null. why? html 과 연결이 되지 전 상태이기 때문이다.
  },
  beforeMount(){
    console.log('before Mounted!', this.count) // 2
    console.log(document.querySelector('h1')); // null. why? html 과 연결이 되지 직전 상태이기 때문이다.
  },
   mounted() {
    console.log('Mounted!', this.count) // 2
    console.log(document.querySelector('h1')); // <h1>2</h1>. why? html 과 연결이 된 직후 이기 때문이다.
  },
}
</script>