Vue.js 의 장점과 특징

Vue.js 장점

• Angular의 장점(데이터 바인딩)과 React의 장점(가상 돔)을 모두 가진다. 
  • 데이터 바인딩? 
    • 데이터와 웹 화면의 요소(HTML DOM)가 서로 양방향으로 연결되어 있어서 어느 한 쪽에 변경이 일어나면 연결되어 있는 다른 쪽에 자동으로 반영되는 것 
  • 가상 돔(Virtual DOM)? 
    • HTML DOM은 트리구조로 되어있어서 웹 화면에 요소가 많아지고 복잡도가 증가하면 무거워진다. 웹 화면에 변경이 일어날 때마다 이러한 트리구조의 갱신이 일어나야 한다면!? 매우 큰 성능 저하를 가져올 것이다.
    • 이런 DOM의 트리구조의 한계를 개선하는 것이 Virtual DOM. 
    • Virtual DOM은 실제 DOM 문서를 추상화하여 변화가 많은 화면을 직접 DOM에서 처리하는 것이 아닌, 가상의 DOM을 만들어 메모리에서 처리한 다음에 실제 DOM과 동기화한다. 

 

Vue.js 특징

• MVVM 패턴 사용
  • MVVM = Model-View-ViewModel
    • 프로그래밍 로직과 화면(View; UI)을 분리해서 개발하기 위한 패턴
    • MVVM패턴은 View와 Model 중간에 ViewModel(DOM Listeners, Directives)을 둠으로써 데이터 바인딩 및 가상 DOM을 통한 성능 향상을 위해 만들어졌다.
• Component를 사용한 재사용성
  • Component = View(화면)를 재사용할 수 있는 구조로 개발하는 것
  • ~.vue 파일 하나하나가 모두 컴포넌트
  • 하나의 컴포넌트는 HTML + CSS + Javascript로 이루어져 있고, 다른 컴포넌트에서 import 하여 바로 사용 가능