Vue.js, Vue3 - Vue 인스턴스

Vue 인스턴스란?

모든 Vue 앱은 Vue 인스턴스를 생성하는 것 부터 시작한다.
Vue2에서는 const vm = new Vue(); 이렇게 생성했으나, Vue3는 const vm = Vue.createApp();으로 생성한다. 둘 다 선언된 vm(vue model)을 콘솔에 찍어 볼 수 있다.

생성된 인스턴스 안에는 미리 정의되어있는 속성과 API들이 있고, 이 API들을 사용하여 원하는 동작을 구현할 수 있다.

Vue 애플리케이션은 생성된 인스턴스들로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성된다.

Vue 인스턴스의 주요 속성

• el
• data
• methods
• computed : 계산된 속성을 정의하여 로직을 간단하게 표현 가능
• watch : 데이터 변화를 감지하여 특정 로직을 실행

Vue 인스턴스 예제

<script>
import { createApp } from 'vue'

const app = createApp({
	/* 최상위 컴포넌트 옵션 */
})
</script>

createApp에 전달하는 객체는 최상위 컴포넌트, 최상위 컴포넌트는 다른 컴포넌트를 자식으로 포함할 수 있다.
싱글파일 컴포넌트를 사용하는 경우 일반적으로 다른 파일에서 루트 컴포넌트를 가져온다.

import { createApp } from 'vue'
import App from './App.vue' // 최상위 컴포넌트

const app = createApp(App)

대부분의 실제 앱은 중첩되고 재사용이 가능한 컴포넌트 트리로 구성된다. 그 예가 Todo 앱의 컴포넌트 트리는 아래와 같다.

App (최상위 컴포넌트)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

그리고 인스턴스는 .mount()메소드가 호출될 때까지 아무것도 렌더링하지 않는다. 반환값은 최상위 컴포넌트

최상위 컴포넌트 내에는

<script>
import FirstComponent form './components/FirstComponent.vue'

export default {
  name: 'App',
  components: {
      FirstComponent
  }
}
</script>

이런식으로 하위컴포넌트를 추가할 수있고, 하위컴포넌트는 여러개가 될 수 있다.

---

[참고: Vue 공식문서 https://v3-docs.vuejs-korea.org/guide/essentials/application.html#the-root-component]