VUE.JS

Vue의 장점 - ReActivity

JUMP개발자 2020. 4. 16. 00:17

Vue.js 를 사용할 경우 ReActivicity의 장점을 갖는다.

 

즉, 변수의 할당된 값이 변경될 경우, 브라우저가 그 것을 감지하여 화면에 뿌려주는 값 또한 자동으로 변경되는 것을 말한다. (반응성)

Vue를 이용하지 않고,  일반적인 자바스크립트를 이용할 경우 아래와 같은 코드를 사용하여 ReActivity를 구현해볼 수있다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!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>
    // console.log(div);
    var div = document.querySelector('#app');
    var str = 'hello world';
    div.innerHTML = str;
 
    viewModel ={};
    Object.defineProperty(viewModel, 'str',{
 
      get : function() {
        console.log('접근');
      },
 
      set : function (newValue) {
        console.log('할당', newValue);
        div.innerHTML = newValue;
      }
 
 
    });
 
 
  </script>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
  

아래와 같이 ViewModel.str를 변경할 시에 화면 값도 같이 변경되는 것을 볼 수 있다.