[Vue] Vue.js 의 특징

MVVM 패턴 ( Model -View - ViewModel)

이미지 출처 : Do it! Vus.js 입문

→ 화면동작 로직과 데이터 처리 로직을 분리

• 뷰 : 사용자에게 보이는 화면
• 돔 : HTML 문서에 들어가는 요소의 정보를 담고있는 데이터트리
• 돔 리스너 : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직 수행 ( 클릭 감지 → 로직)
• 모델 : 데이터, 서버에서 가져온 데이터를 js 객체 형태로 저장
• 데이터 바인딩 : 뷰에 표시되는 내용과 모델의 데이터를 동기화
• 뷰 모델 : 뷰와 모델의 중간영역 , 돔 리스너와 데이터바인딩 제공

 

컴포넌트 기반 프레임워크

이미지 출처 : Vue.js 공식 가이드 :https://kr.vuejs.org/

• 로고, 버튼, 모달 등 다양한 ui 요소들을 component 로 정의함
• component 들을 조합하여 화면 구성
• 코드를 재사용하기 쉽고 화면 구조를 직관적으로 파악가능
• Component 는 전역 / 지역으로 선언 할 수 있고 컴포넌트의 유효범위가 독립적이기 대문에 다른 컴포넌트의 값을 직접적으로 참조할 수 없다.

 

리액트와 앵귤러의 장점결합

• 앵귤러의 양방향 데이터 바인딩 ( Two -way Data binding) , 리엑트의 단방향 데이터흐름 ( One-way Data flow ) 장점을 결합
• 화면에 표시되는 값과 모델 데이터값이 동기화되어 한쪽이 변경되면 다른쪽도 변경
• 컴포넌트간 데이터 전달시 상위 컴포넌트에서 하위 컴포넌트 방향으로만 전달되게 구조화
• 빠른 화면 랜더링을 위해 리액트의 가상 돔(Virtual DOM) 랜더링 방식 적용

 

reference 

- Do it! Vus.js 입문

- Vue.js 공식 가이드 https://kr.vuejs.org/