inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

Vue.js 시작하기 - Age of Vue.js

데이터 바인딩과 computed 속성

데이터 바인딩 관련 질문입니다..

해결된 질문

167

열씨미살자!

작성한 질문수 87

1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app"></div>

<script>
// 대부분의 오픈소스 라이브러리들은 IIFE를 활용한다.
(function () {
function init() {
var div = document.querySelector("#app");
var viewModel = {};

Object.defineProperty(viewModel, "str", {
get: function () {
console.log("접근");
},

set: function (newValue) {
console.log("할당", newValue);
render(newValue);
},
});
}

function render(value) {
div.innerHTML = value;
}

init();
})();
</script>
</body>
</html>

질문이 있습니다.
데이터 바인딩이라는 것이 viewModel을 Object.defineProperty(viewModel) 하는 것까지이고 set이라는 속성을 통해 데이터값에 변화가 있다면 화면에 재랜더링 하는 것을 Reactivity 라고 생각하면 될까요?

아니면 데이터 바인딩라는 개념에 Reactivity를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?

javascript vuejs

답변 1

1

캡틴판교

안녕하세요 동우님, 좋은 질문입니다. 말씀하신대로 화면을 다시 그리는 것이 Reactivity, 그리고 데이터를 화면에 엮어 표현하는 동작이 데이터 바인딩으로 이해하시면 좋을 것 같아요 :)

개발자 툴에서 Vue가 표시되지 않는 현상.

0

93

2

chrome 확장 devtools 버전 문제

0

81

1

Vue.js not detected가 자꾸 뜹니다

0

82

2

마지막 강의가 안되요

0

55

1

data, computed, watch > Reactivity

0

50

1

f12누르고 개발자도구에 vue 탭이 안생겨요

0

89

1

vue composition api

0

72

1

강의 자료 다운이 될까요?

0

127

1

개발자 도구에서 뷰탭이 안보여요....

0

583

3

프롭스 데이터 질문입니다.

0

112

1

component.html:11 Uncaught ReferenceError: Vue is not defined at component.html:11:20 (anonymous) @ component.html:11

0

139

1

화면이 안떠요,, 이전 이후 강의는 뜨는데..

0

235

6

크롬 확장 프로그램 vue devtools 설치했는데

0

531

2

코드를 수정하고 브라우저의 Vue로 넘어가면 다운이 됩니다.

0

242

1

버튼을 클릭해도 event가 발생하지 않습니다.

0

309

1

vue3 css 경로 표시 문의

1

230

2

개발자도구 vue탭

0

354

1

화면 코드 보기

1

225

2

App.vue 내용 변경했는데 창이 연결할수없대요ㅜㅜ

1

383

2

html/css/js로 작성된 코드를 vue.js로 일부 전환하고자 이 강의를 듣기 시작했습니다.

1

885

2

{{ num }} 이 <app-content> 아래에 들어가 있을때에는 노출이 안됩니다...

1

287

2

뷰 개발자도구 이벤트 타임라인 어느 부분에서 확인가능한건가요

1

400

2

다음 단계 강의는...?

1

386

2

버튼을 눌러도 data의 값이 변경되지 않습니다

1

276

2