createApp
함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작한ㄷ.import { createApp } from 'vue'
import App from './App'
const app = createApp({
})
최상위 컴포넌트
가 필요하다.import { createApp } from 'vue'
// 싱글 파일 컴포넌트에서 최상위 컴포넌트 앱을 가져옵니다.
import App from './App.vue'
const app = createApp(App)
App (최상위 컴포넌트)
├─ TodoList
│ └─ TodoItem
│ ├─ TodoDeleteButton
│ └─ TodoEditButton
└─ TodoFooter
├─ TodoClearButton
└─ TodoStatistics
.mount()
메서드가 호출될 때까지 아무 것도 랜더링하지 않는다. "컨테이너"가 될 실제 DOM 엘리먼트 또는 셀렉터 문자열을 인자로 필요로 한다.<div id="app"></div>
app.mount('#app')
앱의 최상위 컴포넌트 컨텐츠는 컨테이너 엘리먼트 내에서 렌더링된다. 컨테이너 엘리먼트 자체는 앱의 일부로 간주되지 않는다.
.mount()
메서드는 반드시 앱의 환경설정 및 에셋(asset)이 모두 등록 완료된 후에 호출되어야 한다. 또한 에셋 등록 메서드와 달리 반환 값은 앱 인스턴스가 아닌 최상위 컴포넌트 인스턴스이다.
EX) created 훅은 인스턴스가 생성된 후에 코드를 실행하는데 사용된다.
Vue.createApp({
data() {
return { count: 1}
},
created() {
// this points to the vm instance
console.log('count is: ' + this.count) // => count is 1"
}
})
인스턴스 라이프사이클에는 mounted, updated, unmounted 과 같은 다른 훅도 존재한다. 모든 라이프사이클 훅에서는 Vue인스턴스를 가리키는 this
컨텍스트와 함께 호출된다.