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

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

데이터와 메소드

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

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) {});