MVVM 모델에서의 Vue

MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 화면 (View)단 라이브러리

Vue 구조도

Vue의 두가지 큰 특징:

1. DOM Listeners: 사용자가 뷰에서 바꾸는 내용(이벤트)를 청취하여 모델(자바스크립트)의 내용을 바꾸거나 특정 로직에서 실행시켜줌
2. Data Bindings: 모델의 변경 내역을 뷰에 반영하는 역할

기존 웹 개발 방식 (HTML, JavaScript)

<div id="app"></div>
<script>
  var div = document.querySelector('#app');
  console.log(div);
  div.innerHTML = 'Hello World';
</script>
<!-- 결과 -->
<div id="app">
	Hello World
</div>

• HTML: 태그, 돔의 정보를 가짐
• JavaScript: 태그나 돔의 내용을 조작함

특정 태그마다 서버에서 받아온 데이터를 변수화하여 그 변수의 값이 화면에 나타나게 된다.

변수로 받아온 데이터의 내용을 변경해주더라도 화면에 해당 내용이 반영되지 않는다.

console.log(div);
var div = document.querySelector('#app');
var string = 'Hello World'
div.innerHTML = string;

string = 'Hello World!!!!!!'
// string 변수를 재선언 해줘도 무효하다

div 태그에 innerHTML 로 다시 덮어씌우면 변수의 변경된 값이 출력된다.

console.log(div);
var div = document.querySelector('#app');
var string = 'Hello World'
div.innerHTML = string;

string = 'Hello World!!!!!!'
div.innerHTML = string;

Reactivity 구현

기존 방식과 다르게 반응성(Reactivity)을 반영해 코드를 개선해본다.

Object.definePropertt() 는 객체의 동작을 재정의하는 api이며, 문법은 아래와 같다.

Object.defineProperty(대상 객체, 객체의 속성, {
  정의할 내용
})