[vue] app.mount()

컨테이너 엘리먼트에 애플리케이션 인스턴스를 마운트한다. 

 

Type

interface App {
  mount(rootContainer: Element | string): ComponentPublicInstance
}

Details

아규먼트는 실제 DOM 엘리먼트 또는 CSS 셀렉터 이다 (처음 매칭되는 엘리먼트가 사용될 것이다). 루트 컴포넌트 인스턴스를 리턴한다.

 

만약 컴포넌트에 템플릿이 있거나 렌더함수가 정의되어 있다면, 컨테이너 안에 존재하는 모든 돔 노드들을 대체할 것이다. 반면에, 만약 런타임 컴파일러가 가능하다면, 컨테이너의 innerHTML은 템플릿으로 사용될 것이다.

 

SSR hydration 모드에서는, 컨테이너 안에 존재하는 DOM nodes 들을 수화시킬 것이다. 만약 매칭되지 않으면, 존재하는 돔 노드들은 매치시키기위해 기대되는 아웃풋으로 변형될 것이다.

 

각각의 앱 인스턴스에서, mount()는 오직 한번만 호출된다. 

Example

import { createApp } from 'vue'
const app = createApp(/* ... */)

app.mount('#app')

실제 돔 엘리먼트에는 이렇게 마운트할 수 있다:

app.mount(document.body.firstChild)