[Vue] 어플리케이션 인스턴스 생성하기

⚠️ 이 포스팅은 Vue3(한국어): 어플리케이션 & 컴포넌트 인스턴스을 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. 어플리케이션 인스턴스 생성하기
2. 컴포넌트 인스턴스 속성들

 

---

 

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

1. 인스턴스 생성

자바스크립트에서 인스턴스란 생성자 함수를 사용해 생성된 객체를 말한다. Vue에서 사용하는 인스턴스는 createApp 함수를 사용하여 만든 Vue 객체(어플리케이션)를 의미한다. 여러 옵션을 가지고 있는 RootComponent는 createApp의 인수로 들어가 어플리케이션이 브라우저에 나타날때 렌더링의 시작점으로 사용된다.

const RootComponent = { /* options */ }
Vue.createApp(RootComponent)

Vue.createApp({ /* options */ })

2. mount하기

mount란 DOM 객체가 생성되고 브라우저에 나타나는 것을 말한다. 인스턴스가 생성된 후 mount 메소드에 Vue를 사용하고 싶은 HTML 요소를 전달하여 mount 할 수 있다. 예를들어, <div id="app"></div>에 Vue 어플리케이션을 마운트 시키고 싶다면, #app을 인수로 전달해야 한다. Vue.createApp으로 Vue 인스턴스를 만든 후 Vue를 적용하고 싶은 HTML 요소를 mount해준다. Vue 인스턴스는 생성 후 HTML의 범위 내에서만 옵션 속성들이 적용된다. 이를 인스턴스의 유효 범위라 한다. 예제에서는 <div id="app"></div> 내부에 있는 HTML 요소만 Vue 인스턴스의 유효범위를 가지게 된다.

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

CLI로 Vue 프로젝트 만들었을때

main.js

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

Vue 프로젝트를를 cdn 주소로 연결해서 사용할때

main.js

const Message = {
  ...
}

Vue.createApp(Message).mount('#app');

 

컴포넌트 인스턴스 속성들

createApp 함수에는 여러 옵션들이 들어간다

1) data 2) methods 3) props 4) computed 5) inject 6) setup 

Vue.createApp({ /* options */ })

아래의 예제에서는 data라는 옵션을 가지고 있는 객체를 createApp의 인수로 전달하였다. createApp에서 전달받은 옵션은 컴포넌트 인스턴스(vm)으로 접근할 수 있다.

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

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

console.log(vm.count) // 4