Vue.js는 화면단 라이브러리이자 프레임워크라 볼 수 있다. 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점으로 지원하지만, 프레임워크 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로 제공된다. 그래서 공식 문서에서는 뷰를 **점진적인 프레임워크(progressive framework)**라고 부른다.
장점
- 러닝커브가 낮다.
- react와 angular에 비해 성능이 우수하고, 빠르다.
- react의 장점과 angular의 장점을 갖고 있다. ( angular의 데이터 바인딩 특성 & react의 virtual DOM 기반 렌더링 특징 )
vue.js는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.
MVVM 패턴이란 화면을 Model - View - ViewModel 로 구조화하여 개발하는 방식을 말한다. 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지 보수가 쉬워진다.
MVVM - 위키피디아
마크업 언어나 GUI 코드를 비즈니스 로직 or 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴
| 용어 | 설명 |
|---|---|
| View | 사용자에게 보이는 화면 |
| DOM | HTML 문서에 들어가는 요소(태크, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 |
| DOM Listener | DOM의 변경 내역에 대해 바로 반응해 특정 로직을 수행하는 장치 |
| Model | 데이터를 담는 용기, 보통 서버에서 가져온 데이터를 javascript 객체 형태로 저장 |
| Data Binding | View에 표시되는 내용과 Model의 데이터를 동기화 |
| ViewModel | 뷰와 모델의 중간 영역, DOM Listener와 Data Binding을 제공하는 영역 |
vue는 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할을 한다. 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 한다.
뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다. 왼쪽 그림은 각 영역을 컴포넌트로 지정하여 구분한 것이고, 오른쪽 그림은 각 컴포넌트 간의 관계를 나타낸 것이다. 컴포넌트 기반 방식으로 개발하는 이유는 코드 재사용이 쉽기 때문이다. 그리고 뷰의 경우에는 컴포넌트를 사용해 HTML 코드에서 화면을 직관적으로 파악할 수 있다. 즉, 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식으로 컴포넌트를 활용하므로 빠르게 구현할 수 있으며, 다른 사람의 코드를 보는 것도 수월해진다.
vue는 angular의 양방향 데이터 바인딩과 react의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
- 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
- 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미하며, 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달하도록 구조화되어 있는 것을 말한다.
이 외에도 빠른 화면 렌더링을 위해 react의 Virtual DOM 렌더링 방식을 적용해 적합한 동작 구조를 갖추고 있다. Virtual DOM을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경 발생시 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 브라우저 입장에서는 성능 부하가 줄어들어 일반적인 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.