# Vue 인스턴스(Instance)

# 생성

Vue.js 애플리케이션의 시작은 Vue 인스턴스 생성에서 시작됩니다. Vue 인스턴스는 Vue 클래스로부터 생성되며, 인스턴스를 만드는 방법은 new 키워드를 사용하는 방법과 Vue.extend() 메서드를 사용하는 방법이 있습니다.

import Vue from 'vue';

// ----------------------------------------
// 방법 1. new Vue()
// ----------------------------------------
const vueInstance = new Vue({
  // 옵션
});

// ----------------------------------------
// 방법 2. Vue.extend()
// ----------------------------------------
const VueExtendInstance = Vue.extend({
  // 옵션
});

# 루트 Vue 인스턴스

Vue.js 애플리메이션은 new Vue()를 통해 만들어진 루트(Root) Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용 가능한 컴포넌트 트리로 구성됩니다. main.js 코드를 살펴보면 루트 Vue 인스턴스 생성 코드와 App 컴포넌트를 가상 DOM 트리로 렌더링하는 코드, 실제 DOM 요소인 <div id="app">에 마운트하는 코드를 살펴볼 수 있습니다.

main.js

import Vue from 'vue';
import App from './App.vue';

// 루트 Vue 인스턴스 생성
new Vue({
  // App 컴포넌트를 렌더 함수를 사용해 하위 VNode로 중첩
  render: h => h(App);
})
// 실제 DOM #app 요소에 마운트(탑재 or 설치)
.$mount('#app');

# Vue 파일과 인스턴스

Vue 파일은 인스턴스 생성 시 전달하는 JavaScript 옵션 객체({})를 내보내는 코드가 <script>에 포함됩니다. 물론 내보내진 JavaScript 객체는 옵션으로 new Vue() 또는 Vue.extend()에 의해 Vue 인스턴스화 됩니다.

App.vue

<script>
export default {
  name: 'App',
  // ...
};
</script>

<script lang="ts">
import Vue from 'vue';

export default Vue.extend({
  name: 'App',
  // ...
});
</script>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  // ...
}
</script>

# 옵션

Vue 인스턴스는 생성 과정에 필요한 옵션을 전달 받는데, 대표적인 옵션은 다음과 같습니다.

• el
• data
• methods
• computed
• watch

# 작동 흐름

Vue 인스턴스를 구성하는 큰 축은 상태(state), 뷰(view), 액션(actions) 입니다. Vue 인스턴스의 작동 흐름은 다음과 같습니다.

1. Vue 인스턴스는 상태를 통해 뷰를 렌더링 합니다.
2. 사용자는 뷰를 통해 액션을 실행합니다.
3. 액션은 상태를 변경합니다.
4. 상태가 변경되면 뷰가 업데이트 됩니다.

각 영역을 코드 상에서 분류하면 뷰는 템플릿 영역, 상태는 데이터 영역, 액션은 메서드 영역으로 나눌 수 있습니다.

<template>
  <!-- 뷰(view) -->
</template>

<script>
export default {
  data() {
    // 상태(state)
  },
  methods: {
    // 액션(actions)
  }
}
</script>

예제 코드에서 각 축을 담당하는 영역 코드를 살펴보세요.

# 참고

보다 자세한 사용법은 Vue 인스턴스 문서를 참고하세요.