Object.defineProperty
Object.defineProperty() - JavaScript | MDN
The static method Object.defineProperty() defines a new property directly on an object, or modifies an existing property on an object, and returns the object.
developer.mozilla.org
객체의 동작을 재정의하는 메서드이다.
Object.defineProperty(대상 객체, 객체의 속성, {
get : 속성에 접근했을 때 동작
set : 속성에 값을 할당했을 때 동작
})
Vue의 핵심은 Reactivity 즉, 반응성이다.
Object.defineProperty()를 사용하면 데이터의 변화를 해당 라이브러리에서 감지하고, 화면을 자동으로 그려준다.
이는 곧 Data Binding이라고도 할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var div = document.querySelector('#app');
var viewModel = {};
(function() { // 즉시 실행 함수
function init() { // Object.defineProperty() 라이브러리화
Object.defineProperty(viewModel, 'str', {
get: function () {
console.log('접근');
},
set: function (newVal) {
console.log('할당', newVal);
render(newVal)
}
});
}
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
</body>
</html>viewModel의 str 속성에 접근하면 콘솔창에 접근 이라는 문구가 출력된다.
그리고 viewModel.str에 어떠한 값을 할당하면 콘솔창에 할당이라는 문구와 할당된 값이 출력되고, 화면에도 할당된 값이 출력될 것이다.
Object.defineProperty() 메서드를 위 코드처럼 작성하여 라이브러리화 할 수 있다.
라이브러리화 한 함수를 init()이라고 이름 지었다.
init() 함수와 render() 함수를 즉시 실행 함수인 (function() {}) 내에 넣어 구현하는 것이 좋다.
어떠한 함수 안에 넣어 동작하게 하면, 해당 함수들은 애플리케이션 로직에 노출되지 않는다.
애플리케이션 로직에 init()과 render() 함수가 노출되지 않게 하기 위해 즉시 실행 함수를 만들어 또 다른 스코프(유효 범위) 내에 집어넣은 것이다.
[인프런] Vue.js 시작하기 - Age of Vue.js
