Vue.js 의 이해

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

다음 순서대로 진행된다.

View
브라우저에서 사용자에게 비춰지는 화면 HTML.
DOM을 이용하여 자바스크립에서 조작할 수 있다.
--> DOM

DOM Listners
ViewModel의 Vue의 DOM Listner에서 이벤트를 감지한다.
--> Vue

Model
자바스크립트의 데이터를 바꿔주거나 자바스크립트의 특정 로직에서 실행한다.
--> Plain JavaScript Objects

Data Bindings
Data Binding를 이용해 바뀐 데이터를 바로 화면에 반영한다.
--> Vue

다음 코드를 보면 원리를 더욱 잘 이해할 수 있다.

<div id="app"></div>

<script>
    var div = document.querySelector('#app');
    var viewModel = {};
    
    // Object.defineProperty(대상 객체, 객체의 속성, { 정의할 내용 })
    // 객체의 동작을 재정의하는 API

    Object.defineProperty(viewModel, 'str', {
        // 속성에 접근했을 때의 동작을 정의
        get: function () {
            console.log('접근');
            // viewModel.str을 실행하면 '접근'이 출력된다.
        },
        // 속성에 값을 할당했을 때의 동작을 정의
        set: function (newValue) {
            console.log('할당', newValue);
            // viewModel.str에 새로운 값을 할당하면 '할당' '새로운 값'이 출력된다.
        }
    })
        
</script>

viewModel.str에 새로운 값을 주면 바로 반영된다.
이것이 view의 핵심인 reactivity(반응성)이다.
데이터의 변화를 라이브러리에서 감지해서 자동으로 화면을 바꿔준다.
이 부분이 Data Bindings 이라고 볼 수 있다.