Vue란?

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

• MVVM패턴
  MVC 패턴에서 Controller를 빼고 ViewModel을 추가한 패턴
• ViewModel
  View를 표현하기 위해 만들어진 View를 위한 Model more

기존 웹 방식(html, js)
-> Reactivity 구현(Object.defineProperty) - 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 그려주는 것(반응성)

<script>
        var div = document.querySelector('#app');
        var viewModel = {};
        // Object.defineProperty(대상 객체, 객체의 속성, {
        //  // 정의할 내용
        // })
        Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 떄의 동작을 정의
            get: function () {
                console.log('접근');
            },
            // 속성에 값을 할당했을 때의 동작을 정의
            set: function (newValue) {
                console.log('할당', newValue);
                div.innerHTML += newValue;
            }
        })
</script>

Reactivity 라이브러리화

즉시 실행 함수

• init과 render가 애플리케이션 로직에 노출되지 않게 실행부분을 다른 scope에 넣어줌
  (유효범위 관리)

        (function () {
            function init() {
                Object.defineProperty(viewModel, 'str', {
                    ...
                });
            }
            function render(value) {
                div.innerHTML = value;
            }
            init();
        })();