[Vue.js] Vue.js Watch
Watch
data 속성에서 정의한 변수를 감시하고 있다가 변수가 가지고 있는 값이 변경되면 이를 감지해 동작하는 요소. 재밌는 사실이 한 가지 있는데, Watch가 감지하는 데이터 Depth 가 Plain 하지 않을 때, 데이터 내부 값이 바뀌어도 해당 변화를 감지하지 못하는 경우가 있다.
아래는 단순한 watch 사용 에제다. Vue 객체가 가지고 있는 데이터에 watch 설정을 해주면 값이 바뀔 때, 특정한 작업을 수행할 수 있도록 function 을 지정할 수 있다. 새롭게 변한 값과 이전 값을 인자로 받아올 수 있으며 추후 이를 이용해 화면을 변경하는 작업도 수행할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
a1 : '',
a2 : '',
a3 : ''
},
watch : {
// 변수 a1을 감시하는 watch 설정
a1 : function(newVal, oldVal){
this.a3 = ' 이전 값: ' + oldVal + ' 새로운 값: ' + newVal
},
// 변수 a2를 감시하는 watch 설정
a2 : function(newVal, oldVal){
this.a3 = ' 이전 값: ' + oldVal + ' 새로운 값: ' + newVal
}
}
})
}
</script>
</head>
<body>
<div id='test1'>
input1 : <input type='text' v-model='a1'/><br/>
input2 : <input type='text' v-model='a2'/><br/>
<h3></h3>
<h3></h3>
<h3></h3>
</div>
</body>
</html>
반응형 인터페이스
Data 속성에 세팅된 변수는 웹 브라우저에 의해 감시된다. 그러나 Vue 객체 생성 후 외부에서 추가된 변수는 감시되지 않는다. 이런 변수들을 감시해 반응형 인터페이스를 구축하기 위해 watch 를 사용한다.
watch 를 사용하면 단순하게 화면에 나타내는 것 외에 개발자가 원하는 기능을 삽입할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://unpkg.com/vue"></script>
<script>
window.onload = function(){
var vm1 = new Vue({
el : '#test1',
data : {
value1 : 100,
counter : 0,
result : 0,
/* 객체 안에 있는 변수만 감시 등록할 수 있기 때문에 데이터 선언 */
obj : {
}
},
methods : {
setValue1 : function(){
this.value1 = 200
},
setValue2 : function(){
/* 외부에서 세팅한 변수 변환 */
this.obj.value2 = 2000
},
addCounter : function(){
this.counter++
}
}
})
/* vm1 이라는 Vue 객체 내부 obj 데이터에 value2 라는 이름으로 1000 값을 세팅 */
Vue.set(vm1.obj, 'value2', 1000)
/* Vue 객체 내부 counter 값이 변화할 때마다 특정 함수를 동작시킬 수 있음 */
/* 단순히 화면에 변화를 나타내는 것에서 "특정 동작"을 지정할 수 있다 */
vm1.$watch('counter', function(new_value, old_value){
this.result = new_value + old_value
})
}
</script>
</head>
<body>
<div id='test1'>
<!-- data 에 등록된 value1 의 변화는 곧바로 반영 -->
<h3>value : </h3>
<button type='button' @click='setValue1'>value1</button>
<hr/>
<!-- data 에 등록되지 않은 value2는 초기 렌더링에 감시하지 않아 변화 감지하지 않음 -->
<!-- 그러나 Vue.set() 이용하면 외부에서 Vue 객체에 감시를 설정할 수 있다 -->
<h3>value2 : </h3>
<button type='button' @click='setValue2'>value2</button>
<hr/>
<h3>counter : </h3>
<h3>result : </h3>
<button type='button' @click='addCounter'>버튼</button>
</div>
</body>
</html>
Leave a comment