Vue.js와 MVVM

Vue.js의 특징

• Angular와 React의 장점들을 모두 결합한 프레임워크이다.
• Angular의 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합했다.
• 양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것
• 단방향 데이터 흐름 : 컴포넌트의 단방향 통신. 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화 되어 있음.

 

Vue.js 와 MVVM

MVVM : Model + View + ViewModel

 

구성 요소

• Model : 순수 자바스크립트 객체
• View : 웹페이지의 DOM. 사용자에게 보여지는 화면
• ViewModel : View와 Model의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역
  • 기존에는 자바스크립트로 View에 해당하는 DOM에 접근하거나 수정하기 위해 jQuery와 같은 library 이용
  • Vue는 View와 Model을 연결하고 자동으로 바인딩하므로 양방향 통신을 가능하게 함

 

동작 원리

1. View에 입력이 들어오면 Command 패턴으로 ViewModel에게 명령
2. ViewModel이 데이터를 Model에게 요청
3. Model이 ViewModel에 응답
4. ViewModel은 응답 받은 데이터를 가공해 저장
5. View는 ViewModel과의 Data Binding으로 자동 갱신

 

Command 패턴

• 객체의 행위(메서드)를 클래스로 만들어 캡슐화하는 디자인 패턴

 

Data Binding

• Model의 데이터와 View에 표시되는 내용을 동기화 하는 것

 

MVVM 패턴의 장점

• 코드의 중복을 줄일 수 있음
• 반응형 UX 개발에 편리
• 요청에 대한 대답을 기다리지 않아도 됨
• 모듈화하여 개발할 수 있음 (Model, View, ViewModel 각 구조가 독립적)