Vue

VUE 란 ? 

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

간단하게 설명을 하자면 view의 키보드 입력 이라던지 마우스 click 등의 이벤트를 VUE DOM listeners가 청취하게 된다.

이러한 이벤트를 잡아서 javaScript에 있는 데이터를 바꿔주거나 지정했던 특정 로직에서 실행을 한다!

 

javaScript의 데이터가 변경되었을때 Data Bindings 를 통해서 화면에 반영 됩니다!!

 

 

기존의 개발

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

  <script>
    //기존의 방식
    
    var div = document.querySelector('#app');
    var str = 'hello world';
    div.innerHTML = str;
    
	//변수의 값이 변경될때 다시 넣어줘야 한다!
    str  = 'hello Vue!!!';
    div.innerHTML = str;

  </script>

 

그러나 이런걸 Vue 의 Reactivity로 구현하자면

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

    (function(){
        function init(){
            Object.defineProperty(viewModel , 'str' ,{
                // 변수에 접근
                get : function() {
                    console.log('접근');
                },
                // 변수에 값 저장
                set : function(value) {
                    console.log('할당' , value);
                    render(value);
                }
            });
        }
        function render(value){
            div.innerHTML = value;
        }
        init();
    }());
    </script>  

 

 

 

 

Reactivity는!!

데이터의 변화를 라이브러리에서 감지해서 화면을 구성을 해준다