[Vue.js] Reactivity 기초
- 📕 Programing/Vue.js
- 2020. 5. 17. 19:27
참고 URL : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
Reactivity 기초
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
// div.innerHTML = 'hello world';
//객체의 동작을 재정의
//Object.defineProperties(대상객체, 객체의 속성, {
//정의할 내용
// });
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue){
console.log('할당', newValue);
div.innerHTML = newValue;
}
});
</script>
</body>
</html>위의 소스 라이브러리화 하기
<script>
var div = document.querySelector('#app');
var viewModel = {};
(function(){
function init(){
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue){
console.log('할당', newValue);
render(newValue);
}
});
}
function render(value){
div.innerHTML = value;
}
init();
})();
</script>- 브라우저에서 변수에 값을 대입해보면 실시간으로 변경되는 것을 볼 수 있다.
'📕 Programing > Vue.js' 카테고리의 다른 글
| [Vue.js] 뷰 컴포넌트 통신 (0) | 2023.01.06 |
|---|---|
| [Vue.js] 컴포넌트 (0) | 2023.01.04 |
| [Vue.js] Vue.js란 무엇인가? (0) | 2020.05.17 |
| [Vue.js] vs code 설치 및 추가 플러그인 설치 (0) | 2020.05.17 |