[Vue] Vue 인스턴스

MVVM 패턴

Vue는 MVVM 패턴에서 부분적으로 영감을 받았다고 한다. 그렇기 때문에 MVVM 패턴을 알고있어야 할 필요가 있다.

 

MVVM 패턴은 다음 세 가지를 포함한다.

Model : 데이터 관리를 의미하며 Vue에서는 Javascript Object를 의미한다.

View : 사용자들에게 출력되는 화면이며 Vue에서는 디렉티브를 사용한다.

View Model : Model과 View의 인터페이스 역할을 한다. Vue의 인스턴스가 하는 역할이다.

위에 3개의 역할이 독립적으로 동작하여 의존성을 낮추고 유지보수가 용이하도록 하였다.

 

Vue는 각각의 기능을 다음과 같이 분리하였다. 

View에서는 Vue의 디렉티브를 통해 데이터를 사용자에게 출력한다.

  <div class="app">
    {{ message }}
  </div>

Model은 화면에 보여줄 데이터를 관리하며 Javascript Object가 그 역할을 한다.

data:{
	message:"Hello"
}

이제 View와 Model이 연결될 수 있도록 Vue 인스턴스를 통해 생성한다.

    const app = new Vue({
      el:".app",
      data:{
        message:"Hello"
      }
    })

이를 통해 UI에서 비즈니스 로직과 View 로직을 분리한다. 이것을 이해하면 Vue를 좀 더 쉽게 이해할 수 있었다. 아직까지는 같은 기능이라도 바닐라 자바스크립트로 구현하는 것이 편리하고 Vue의 필요성을 깨닫지는 못했다. 하지만 다뤄야할 데이터가 많아지고 복잡해지면 Vue가 좀 더 편리하게 다가올 것이다.

data

Vue 인스턴스의 data 객체에 있는 모든 속성이 반응형 시스템에 추가된다. data에 정의된 속성들이 변경될 때마다 View가 반응하고 변경된 값으로 갱신한다.

이때 주의할 것은 Vue 인스턴스가 생성될 때 정의한 data만 변경될 때 자동적으로 View에서 변경된다. 인스턴스 생성 후 새로운 속성을 추가하면 자동적으로 View가 업데이트되지 않는다. 따라서 사용할 data를 초기값을 설정하여 정의해야 한다.

---

참고 kr.vuejs.org/v2/guide/instance.html