---
tags: vue
---

# Vue Instance

## Vue 인스턴스 만들기

모든 Vue 앱은 `Vue` 함수로 Vue 인스턴스를 만드는 것으로 시작한다.
뷰의 디자인은 `MVVM pattern`에 부분적으로 영향을 받았다.

- MVVM 패턴 (Model-view-viewmodel)
MVVM은 아키텍쳐 패턴으로, UI(view) 개발과 백엔드 로직(비즈니스 로직) 개발을 분리시켜서, 뷰가 특정한 모델에 종속되지 않게 한다. `viewmodel`은 value converter인데, 이는 모델의 데이터 객체를 쉽게 관리되고 보여지는 방식으로 변경시켜주는 역할을 한다.

컨벤션으로 뷰 인스턴스를 `vm`이라는 변수명을 붙인다.

인스턴스를 만들떄 **option object**를 넘기게 된다.

const vm =  new Vue({
    // options
})

뷰 어플리케이션은 `new Vue`로 만든 **루트 뷰 인스턴스**로 구성된다.
루트부터 시작하여 재사용할 수 있는 **뷰 컴포넌트**가 중첩된 트리 구조를 이루고 있다.

말하자면 이런 구조!

Root Instance
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

모든 **뷰 컴포넌트**는 <u>뷰 인스턴스</u>이다. 따라서 컴포넌트들도 option object를 가질 수 있다.

## 데이터와 메소드

뷰 인스턴스가 만들어지면, <u>그 `data` 객체에 있는 모든 프로퍼티가 뷰의 **`반응형 시스템`**(reactivity system)에 추가된다.</u> 프로퍼티의 값이 변경되면, 새로운 값에 맞춰 뷰가 "반응"하여 새로운 값과 일치하도록 업데이트된다.

const dataObj = {name: null};

const vm = new Vue({
  data: dataObj,
});

//vm과 dataobj의 reference는 같다. 

vm.name == dataObj.name; // true

//vm과 dataobj의 참조가 같으므로 당연한것...?! 
vm.name = 'lillie';
dataObj.name; // lillie

// vice-versa도 그러하다.
dataObj.name = 'yang';
vm.name; // yang

**데이터가 변경되면, 화면은 다시 렌더링**된다.
이때 주의할 점은 **인스턴스가 만들어질때 `data`의 프로퍼티였던 것들에 대해서만 "반응"**(reactive)한다.

vm.age = 10;

age 프로퍼티는 뷰 인스턴스가 생성될 때 존재하지 않았다. 따라서 age가 변경되어도 화면은 업데이트되지 않는다.

**따라서 프로퍼티가 이후에 필요할 경우, 해당 프로퍼티에 빈 값이나 존재하지 않는다는 상태를 지정해두어야 한다.**

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

예외가 되는 경우는 **`Object.freeze()`** 를 사용하는 경우이다.
이는 **현재 프로퍼티가 변경되는 것을 막는다. 따라서, 반응형 시스템이 변화를 추적할 수가 없다.**

💡 상태가 변하지 않은 값은 Object.freeze로 동결시켜서, 뷰가 getter/setter로 만드는 작업을 하지 않게 함으로써, js heap memory 사용량을 줄일 수 있다. => 최적화!

참고로`object.freeze(object)` 함수는 객체를 전달받아서 동결시킨다. 내부 프로퍼티의 값을 변경시킬 수 없다. 단, 깊은 동결(deep freeze)은 아니다.

- **Vue 인스턴스의 속성** : **접두사로 `$`**
data 프로퍼티 외에도 Vue 인스턴스는 여러 프로퍼티와 메소드를 제공한다. 이를 사용자가 정의한 프로퍼티와 구분하기 위해 접두사로 `$`를 붙인다.

    vm.$data === data; // true
    vm.$el === document.getElementById("app"); // true

    // $watch는 인스턴스 메소드인데, 'vm.year'이 바뀌면 콜백이 실행된다.
    vm.$watch("year", function (newValue, oldValue) {});