Vue.js 문법 - 인스턴스와 라이프사이클

 

인스턴스

 

모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다

 

const app = Vue.createApp({ /* options */ })
const vm = createApp(App).mount('#app')

 

인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있습니다.

<div id="app"></div>에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야합니다:

 

라이프사이클 다이어그램

 

 

예제

 

/* App.vue */

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

<script>
export default {
  data() {
    return {
      count: 2
    }
  },
  beforeCreate() {
    // Before Create!
    console.log('Before Create!')
  },
  // 인스턴스가 생성된 후에 코드를 실행, 데이터에 접근 가능
  created() {
    // Created! 2
    console.log('Created!', this.count)    
  },
  beforeMount() {
    // Before Mount!
    console.log('Before Mount!')
    // null
    console.log(document.querySelector('h1'))
  },
  // 렌더링 된 후에 코드를 실행, HTML 요소에 접근 가능
  mounted() {
    // Mounted!
    console.log('Mounted!')
    // <h1>2</h1>
    console.log(document.querySelector('h1'))
  }
}
</script>

 

---

 

참고

https://v3.ko.vuejs.org/guide/introduction.html

시작하기 | Vue.js