: 모든 Vue application은 createApp 함수로 생성된 application instance 생성으로 시작된다.
** npm init vue@3.0에서도 main.js를 보면 확인할 수 있다.
: createApp에 전달되는 object는 무조건 component이다. 다른 component를 children으로써 포함할 수 있는 "root component"를 App은 필요로 한다.
: application instance는 .mount() method를 호출하기 전까지 랜더링되지 않는다. 해당 method는 DOM 요소나 Selector문인 인수를 필요로한다.
: root component의 컨텐츠는 컨테이너 요소안에서 랜더링될 것이다. 그 컨테이너 요소는 해당 앱의 구성요소가 아니다.
<div id="app"></div>
app.mount('#app')
-> 위의 예제에서 본듯이 랜더링되는 장소는 div id="app"이다. 랜더링되는 장소인 컨테이너 요소는 앱에 속하는 요소가 아니다.
: .mount method는 모든 앱 통합과 asset 등록 후에 호출될 수 있다. 또한 반환값은 asset 등록 method와 달리 application instance 대신에 root component이다.
: Vue를 빌드과정없이 사용하면, 우리는 root component의 template을 mount container에 사용할 수 있다.
<div id="app">
<button @click="count++">{{ count }}</button>
</div>
-> mount container
import { createApp } from 'vue'
const app = createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
-> root component의 template
-> 즉, count state같은 값을 container에서 사용할 수 있다.
: application instance는 우리가 앱레벨 옵션을 구성할 수 있는 .config 객체를 노출한다.
app.config.errorHandler = (err) => {
/* handle error */
}
-> 예를 들면 앱레벨 에러 핸들러를 정의하기 같은 것이 있다.
app.component('TodoDeleteButton', TodoDeleteButton)
-> 해당 application instance는 app범위 asset을 등록하기 위한 몇몇 method를 제공한다. 예를 들면 컴포넌트를 등혹하기위한 것.
이것은 TodoDeleteButton이 우리 앱 어디서든 사용할 수 있게 만든다. API reference에서 application instance APIS에 대해서 확인할 수 있다.
: 너는 같은 페이지에 단일 application instance이라는 제약은 없다. createApp API는 다중 Vue application이 동시에 존재하도록 한다. 각각의 앱 범위는 구성과 글로벌 asset이다.
만약 서버 랜더링 HTML을 개선하고 큰 페이지의 특정 부분만 제어하는데 Vue를 필요로 한다면, 전체 page에 대한 단일 Vue application instance는 피해라. 대신에 작은 다중 application instance를 만들고 필요로하는 요소에 mount해라.