Reactivity (반응성)
데이터의 변화를 라이브러리에서 감지해 알아서 화면에 뿌려줌
<body>
<div id="app"></div>
<script>
var div = document.querySelector("#app");
var viewModel = {};
Object.defineProperty(viewModel, "str", {
// 속성에 접근했을 때의 동작을 정의
get: function () {
console.log("접근");
},
// 속성에 값을 할당했을 대의 동작을 정의
set: function (newValue) {
console.log("할당", newValue);
div.innerHTML = newValue;
},
});
</script>
</body>
// 객체의 동작을 재정의하는 api
Object.defineProperty(대상 객체, 객체의 속성,{
// 정의할 내용
})
✅ Reactivity를 라이브러리화 하는 법
- 즉시 실행 함수 사용
- init과 render함수가 애플리케이션 로직에 노출되지 않게 또다른 스코프(유효범위)에 넣어주는 것
- 일반적인 오픈소스 라이브러리는 즉시 실행 함수 형태로 유효범위를 관리함
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();
})();
반응형
'D.evelop > Vue.js' 카테고리의 다른 글
| [Vue.js] Node 버전에 의한 오류 (0) | 2022.06.21 |
|---|---|
| [Vue.js] CLI 생성 (0) | 2022.04.20 |
| [Vue.js] Component 컴포넌트 (0) | 2022.02.04 |
| [Vue.js] Instance 인스턴스 (0) | 2022.01.27 |
| [Vue.js] 시작 전 환경세팅 (0) | 2022.01.26 |
댓글