Vue.js 란?

일반적인 웹에서는 html, css, javascript를 이용해서 화면을 구성하고 조작한다.

 

Vue.js 

 

 

<div id="app"></div>
 
<script>
    const app = document.querySelector('#app');
    let str = 'hello';
    app.innerHTML = str;    // #app 영역에 hello 텍스트 노출
 
    str = 'Hi';
    app.innerHTML = str;    // str 변수의 값을 바꿨지만 바뀐 내용이 즉시 반영되는 것이 아닌 innerHTML 을 통해 다시 선언해줘야 바뀐 변수값이 #app 영역에 적용된다.
</script>

 

반면 Vue.js는 MVVM(Model-View-ViewModel) 패턴으로 

화면에서 보여지는 내용들을(View) Vue의 Dom Listeners를 통해 자바스크립트에 있는 데이터를 바꿔주거나 특정 자바스크립트를 실행하게 된다.

그리고 Dom Listeners를 통해 자바스크립트의 데이터가 변경 됐을 때 Data Bindings를 통해 변경된 내용을 화면에 반영하게 된다.

<div id="app"></div>
 
<script>
    const app = document.querySelector('#app');
    const viewModel = {};
 
    // Object.defineProperty(대상 객체, 객체의 속성, {
    //      정의할 내용
    // })
 
    Object.defineProperty(viewModel, 'str', {
        // 속성에 접근했을 때의 동작을 정의
        get: function(){
            console.log('접근')       // 콘솔창에서 viewModel.str 을 입력하면 '접근' 출력
        }
        // 속성에 값을 할당했을 때의 동작을 정의
        set: function(newValue){
            console.log('할당', newValue)     // 콘솔창에서 viewModel.str = 'Hi' 를 입력하면 '할당 10'  출력
            app.innerHTML = newValue        // viewModel.str 값을 할당/변경할 때 마다 해당하는 값을 app에 뿌려준다.
        }
    });
</script>

 

* Object.defineProperty : 객체의 속성에 접근, 할당 했을 때의 동작을 정의한다.

 

위와 같이 데이터를 접근/변경할 때 마다 바로바로 데이터를 바인딩 시켜주는 것은 Vue.js의 가장 중요한 특징인 Reactivity이다.