뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위
new Vue({
...
});
모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작한다.
const app = Vue.createApp({ // options // })
createApp(App).mount('#app')
대부분의 메소드들은 동일한 인스턴스를 반환하여 연결(chaining)을 허용한다.
조합하여 화면을 구성할 수 있는 블록
const app = Vue.createApp(RootComponent = //App.vue// )
// 어플리케이션을 mount 할 때 렌더링의 시작점으로 사용된다.
const vm = app.mount('#app')
컴포넌트는 각각 고유한 유효 범위를 갖고 있기 때문에 직접 다른 컴포넌트의 값을 참조할 수 없다.
따라서 뷰 프레임워크 자체에서 정의한 컴포넌트 데이터 전달 방법을 따라야한다.
상위(부모) - 하위(자식) 컴포넌트 간의 데이터 전달 방법을 쓴다.
App.vue 처럼 하나의 뷰 컴포넌트 밖에서도 컴포넌트 안에 내용들을 확인할 수 있다.
const app = Vue.createApp({
data() {
return { count: 4 }
}
})
const vm = app.mount('#app')
console.log(vm.count) // => 4
각 컴포넌트는 생성될 때 일렬의 초기화 단계를 거친다.
반응성이 있을 때 라이프사이클 훅 함수를 실행한다.
<template>
<h1>{{ count }}</h1>
</template>
<script>
export default {
data() {
return {
count: 2
}
},
beforeCreate() {
console.log('Before Create!', this.count) // Before Create! undefined
},
created() {
console.log('Created!, this.count') // Created! 2
console.log(document.querySelector('h1')) // null
},
beforeMount() {
console.log('Before Mount!')
console.log(document.querySelector('h1')) // null
},
mounted() {
console.log('Mounted!')
console.log(document.querySelector('h1')) // <h1>2</h1>
} // beforeCreate부터 밑 코드들 순서가 바뀌더라도 결과는 beforeCreate => created => beforeMount => mounted 순으로 출력된다.
}
</script>
Reference