Vue.js

Vue.js

---

💡 **Vue.js**는 **React**와 같이 대중적인 오픈 소스 JavaScript 프레임워크다. `MVVM`패턴의 `ViewModel`에 해당하고, UI 코드와 데이터 제어 로직을 **분리**하며, `SPA`를 구축하는데 용이하다. (**SPA : SIngle Page Application**)

• View ( HTML DOM) : 사용자에게 보이는 화면
• Model ( JS ) : 데이트를 담는 곳으로, 보통 서버에서 가져온 데이터를 JavaScript Object로 저장
• ViewModel : View와 Model의 중간 영역으로 DomListener와 DataBinding을 제공하는 영역
  • DOM : HTML 문서에 들어가 있는 요소 ( tag, class, attribute 등 )의 정보를 담고 있는 데이터 Tree
  • DOM Listener : DOM의 변경에 대한 즉각적으로 반응하여 특정 로직을 수행하는 장치
  • Data Binding : View에 표시되는 내용과 모델의 데이터를 동기화
    • Vue에서는 기본적으로 단방향 Data Binding으로 컴포넌트간 통신은 상위 컴포넌트에서 하위 컴포넌트로 전달.

장점

---

1. 직관적이고 배우기 쉽다.
2. React(Virtual DOM)와 Angular(Data Binding)의 장점들을 합침.
3. 컴포너틑 기반 프레임워크로 컴포넌트의 조합으로 View 구성, 코드의 재사용 쉬움.

특징

---

1. MVVM 패턴 ( Model - View - ViewModel )
   1. 프로그래밍 로직과 호면에 해당하는 View(UI)를 분리해서 개발하기 위해 설계된 패턴.
   2. 웹의 경우는 HTML DOM이 View, JavaScript가 Model의 역할을 하게 된다.
   3. MVVM 패턴은 View와 Model 중간에 ViewModel을 두면서 Data Binding 처리와 가상 DOM을 통한 성능과 개발의 편의성을 제공하기 위해서 만들어짐.
2. Component를 사용하므로 재사용성이 높음.