Vue 3.0 (3) Creating a Vue Application

윤호성·2022년 3월 4일
0

vue reference 공부

목록 보기
3/3

vue 3.0 reference 공부

2022. 03. 04.

2022. 03. 05.

Creating a Vue Application

The application instance

: 모든 Vue application은 createApp 함수로 생성된 application instance 생성으로 시작된다.
** npm init vue@3.0에서도 main.js를 보면 확인할 수 있다.

The Root Component

: createApp에 전달되는 object는 무조건 component이다. 다른 component를 children으로써 포함할 수 있는 "root component"를 App은 필요로 한다.

  • SFC(Single-File Component)이라면, 우리는 다른 파일에서 root component를 가져온다.
  • 가이드에서는 SFC를 사용하지만, 실제 앱에서는 재사용 component를 사용하며 tree로 구성된다.

Mounting the 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이다.

In-DOM Root Component Template

: 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에서 사용할 수 있다.

App Configurations

: application instance는 우리가 앱레벨 옵션을 구성할 수 있는 .config 객체를 노출한다.

app.config.errorHandler = (err) => {
  /* handle error */
}

-> 예를 들면 앱레벨 에러 핸들러를 정의하기 같은 것이 있다.

app.component('TodoDeleteButton', TodoDeleteButton)

-> 해당 application instance는 app범위 asset을 등록하기 위한 몇몇 method를 제공한다. 예를 들면 컴포넌트를 등혹하기위한 것.

이것은 TodoDeleteButton이 우리 앱 어디서든 사용할 수 있게 만든다. API reference에서 application instance APIS에 대해서 확인할 수 있다.

Multiple application instances

: 너는 같은 페이지에 단일 application instance이라는 제약은 없다. createApp API는 다중 Vue application이 동시에 존재하도록 한다. 각각의 앱 범위는 구성과 글로벌 asset이다.

만약 서버 랜더링 HTML을 개선하고 큰 페이지의 특정 부분만 제어하는데 Vue를 필요로 한다면, 전체 page에 대한 단일 Vue application instance는 피해라. 대신에 작은 다중 application instance를 만들고 필요로하는 요소에 mount해라.

profile
프론트엔드 개발자

0개의 댓글