기존 웹 개발 방식
일반적으로 기존 웹 개발 방식은 HTML, CSS, JavaScript다.
<body>
<div id="app"></div>
<script>
var div = document.querySelector("#app");
console.log(div);
var str = 'hello world'
div.innerHTML = str;
str = 'hello world!!!!';
div.innerHTML = str;
</script>
</body>위에서 알 수 있듯이 변수를 변경한 후에 다시 html코드를 작성해줘야 변경사항이 화면에 반영이된다.
Object.defineProperty()
객체의 동작을 재정의 하는 API
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
// div.innerHTML = 'hello world';
var viewModel = {};
// Object.defindProperty('대상객체', '객체의 속성', {
// 정의할 내용
// })
// 즉시 실행 함수
(() => {
function init() {
// viewModel 객체에 str이라는 속성에다가 get과 set을 선언
// 이것이 바로 Vue의 핵심인 Reactivity(반응성)
Object.defineProperty(viewModel,'str', {
// 속성의 접근 했을 때의 동작을 정의
// viewModel.str 로 접근
get: function(){
console.log('접근');
},
// 속성의 값을 할당했을 때의 동작을 정의
// viewModel.str = 10 로 할당
set: function(newValue){
console.log('할당', newValue);
render(newValue);
}
})
}
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
</body>Object.defineProperty의 동작이 Vue의 핵심인 Reactivity(반응성)다.
따라서 Vue의 핵심은 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 다시 그려준다(데이터 바인딩).
