03-Vue.js / Instance

 

 

---

 

1. Vue Instance 개요

이전 코드에서 Vue.createApp() 메소드를 호출하여 만들어진 객체를 application instance라고 부릅니다. 전체 component tree는 application instance를 mount할 때 렌더링 됩니다.

application instance를 그림으로 보면 다음과 같습니다 .

application instance를 생성할 때 root component instance가 인자로 전달되고 component안의 속성을 표현하는 것을 option 이라고 부릅니다.

---

2. data 옵션

data 옵션(data 함수)은 component가 관리하고 추적해야 할 데이터를 등록할 때 사용합니다. 데이터의 변경을 탐지하고 화면을 갱신하는 역할을 수행합니다.

data 옵션은 반드시 객체를 리턴하는 함수여야 합니다. Vue 2.x에서는 직접 객체를 지정하기도 했으나 3.x 부터는 함수가 사용되어야 합니다.

앞서 반응성에 관한 proxy에 대해서 알아봤는데 proxy가 만들어지는 시점은 component instance가 생성될 때 입니다. 따라서 component instance가 생성되고 관찰이 시작되면 반응성을 지닌 속성을 더이상 추가할 수 없습니다. 따라서 반응성을 가져야 할 데이터는 미리 속성으로 추가해야 합니다.

---

3. 생명주기 method

Vue component의 생명주기는 component가 생성된 후부터 component가 app component에서 제거될 때까지의 흐름을 말합니다. 각 생명주기마다 실행할 수 있는 event hook을 등록할 수 있습니다.

---