Vue.js란?

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

• 데이터 바인딩과 화면 단위를 컴포넌트 형태로 제공하며,
  관련 API 를 지원하는데에 궁극적인 목적이 있음

• Angular에서 지원하는 양방향 데이터 바인딩 을 동일하게 제공

• but 컴포넌트 간 통신의 기본 골격은 React의 단방향 데이터 흐름(부모 -> 자식)을 사용

• 다른 FE 프레임워크(Angular, React)와 비교했을 때 상대적으로 가볍고 빠름

• 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능

vue의 핵심

reactivity : 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려줌

	// 객체의 동작을 재정의하는 api
	Object.defineProperty(대상 객체, 객체의 속성,{
             정의할 내용
         })

	var div = document.querySelector('#app');
	var viewModel = {};


        Object.defineProperty(viewModel, 'str', {
            // 속성에 접근했을 때의 동작을 정의
            get: function() {
                console.log('접근');
            },
          
            // 속성에 값을 할당했을 때의 동작을 정의
            set: function(newValue) {
                div.innerHTML = newValue;
            }
        })

viewModel.str ;
viewModel.str = 'hello';