1. Vue 란?

웹 개발을 위한 FrontEnd 프레임워크이며,
MVVM 패턴의 ViewModel에 해당하는 화면단 라이브러리이기도 하다.

특징

MVVM 패턴
양방향 데이터 바인딩(앵귤러)와 단방향 데이터 흐름(리액트)

MVVM 패턴

mvvm 패턴

View가 특정 모델(View-Model, Model)에 종속되지 않도록 로직을 분리한 패턴이다.
뷰, 모델, 뷰모델을 분리하여 독립적으로 개발을 할 수 있으며, View-Model 계층을 통해 View와 Model이 업데이트된다.

Layer	Description
View	사용자가 보며 상호작용하는 UI
ViewModel	Model과 View를 동기화해주며 Vue에서는 Vue인스턴스를 뜻한다. DOM Listener와 데이터 바인딩을 제공한다.
Model	데이터와 비즈니스 로직을 담는 곳. JS에서는 Object(JSON) 형태로 저장되어있다고 보면 된다. Vue의 Data 속성에 해당한다.

View

<div id="app">
  <h1>{{message}}</h1>
</div>

ViewModel

const vue = new Vue({
  el: '#app', // 연결할 View를 지정
  data: model, // 연결할 Model을 지정
});

Model

const model = {
  message: 'hi',
};

언뜻 보면 뷰가 뷰모델에 의존적인것처럼 보이지만, Command 패턴과 데이터 바인딩을 통해 의존성을 제거하였다.

Command 패턴 : 특정 객체에 대한 기능(명령)들을 객체 내부에서 구현하는것이 아닌, 객체화하여 인터페이스를 통해 제공하는것

데이터 바인딩 : view의 요소들을 데이터와 연결해준다. Vue에서는 주로 와 v-bind를 통해 양방향 데이터 바인딩을 구현한다.

양방향 데이터 바인딩

View나 Model에서 데이터를 변경하면 다른 한쪽도 데이터가 자동으로 변경된다.

단방향 데이터 흐름

데이터의 흐름이 한쪽으로 정해져 있는 것을 뜻한다.
상위 컴포넌트에서 하위 컴포넌트로만 전달되게 구조화되어있다.
(데이터를 상위로 전달하려면 이벤트버스와 같은 방법으로 데이터를 전달하면 가능하긴 하다.)

가상 DOM

DOM을 본 따 만든 객체 덩어리이며, diff 알고리즘을 통해 Real DOM 대신 바뀐 점을 탐색해주어 렌더링 과정을 줄여주고 브라우저의 부담을 덜어준다.
원래는 관련된 DOM 요소가 바뀔 때마다 바뀐 횟수만큼 렌더링을 해주는데,
가상 DOM을 통해서 바뀐 곳을 파악하고 최종적으로 한번만 렌더링해준다. (참고)open in new window

TIP

DOM요소를 조작하는것보다 렌더링을 여러번 해주는 비용이 훨씬 크다.

# 1. Vue 란?

# 특징

# MVVM 패턴

# View

# ViewModel

# Model

# 양방향 데이터 바인딩

# 단방향 데이터 흐름

# 가상 DOM