<Reactivity>
반응성.
데이터의 변화를 라이브러리에서 감지해 알아서 화면을 자동으로 그려주는 것 - 데이터 바인딩
<Object.defineProperty>
객체의 특정 습성, 동작을 재정의 하는 api
문법 :
Object.defineProperty(대상객체, 객체의 속성, {
정의할 내용
}
Object.defineProperty(viewModel, 'str',{
//속성에 접근했을 때의 동작을 정의
get:function(){
console.log('접근');
},
//속성에 값을 할당했을 때의 동작을 정의
set:function() {
console.log('할당', newValue)
}
})
<Reactivity 라이브러리화>
자동실행함수를 사용
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
(function(){
function init(){
Object.defineProperty(viewModel, 'str', {
//속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
//속성에 값을 할당했을 때의 동작을 정의
set: function() {
console.log('할당', newValue);
render(newValue);
}
})
function render(value){
div.innerHTML = value;
}
init();
})();
</script>
</body>
'vue.js' 카테고리의 다른 글
| 컴포넌트 통신 - props (0) | 2023.01.10 |
|---|---|
| 컴포넌트 (0) | 2023.01.10 |
| 뷰 인스턴스 (0) | 2023.01.10 |
| vscode플러그인 (0) | 2023.01.10 |
| nodejs와 vuejs (0) | 2023.01.09 |