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

1. 인스턴스

01. 어플리케이션 인스턴스 생성하기

• https://v3.ko.vuejs.org/guide/instance.html#어플리케이션-인스턴스-생성하기

모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다 :
const app = Vue.createApp({ /* options */ })

인스턴스가 생성되면, mount 메소드에 컨테이너를 전달하여 mount 할 수 있습니다.
예를들어, <div id="app"></div>에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 전달해야합니다:
Vue.createApp({ /* options */ }).mount('#app')

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 연결(chaining)을 허용합니다:
Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

02. 최상위(Root) 컴포넌트

createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용됩니다.
이 컴포넌트는 어플리케이션을 mount할 때, 렌더링의 시작점으로 사용됩니다.

어플리케이션을 DOM 요소에 마운트되어야합니다. 예를들어,
Vue 어플리케이션을 <div id="app"></div>에 마운트하려면 #app을 전달해야 합니다.
const RootComponent = { /* options */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

03. 컴포넌트 인스턴스 속성들

가이드 앞부분에서 data 속성을 만났습니다.
data에 정의된 속성은 컴포넌트 인스턴스를 통해 노출됩니다:
const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

2. 라이프사이클(생명주기)

01. 라이프사이클 훅

각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다.
예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야합니다.
그 과정에서 라이프사이클 훅이라 불리우는 함수도 실행하여,
사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다.

예를들어, created 훅은 인스턴스가 생성된 후에 코드를 실행하는데 사용됩니다:
Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    // `this` points to the vm instance
    console.log('count is: ' + this.count) // => "count is: 1"
  }
})

인스턴스 라이프사이클에는 mounted, updated, unmounted 과 같은 다른 훅도 존재합니다.
모든 라이프사이클 훅에서는 Vue인스턴스를 가리키는 this 컨텍스트와 함께 호출됩니다.

02. 라이프사이클 다이어그램

아래는 인스턴스 라이프사이클에 대한 다이어그램입니다.
지금 당장 모든 것을 완전히 이해할 필요는 없지만 다이어그램은 앞으로 도움이 될 것입니다.

3. 실습

01. 프로젝스 설치

npx degit minseung-moon/webpack-template-basic#eslint vue3-lifecycle
npm install

• error 발생시

npm install webpack
npm install --save-dev webpack-cli
npm update vue-loader
npm i vue-loader
npm install vue@next

02. 소스 수정

• App.vue

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

<script>
export default {
  data() {
    return {
      count: 2,
    };
  },
  beforeCreate() {
    console.log("Befor Created!", this.count);
  },
  created() {
    console.log("Create!", this.count);
    console.log(document.querySelector("h1"));
  },
  beforeMount() {
    console.log("Befor Mounted!");
    console.log(document.querySelector("h1"));
  },
  mounted() {
    console.log("Mounted!");
    console.log(document.querySelector("h1"));
  },
};
</script>