watch 속성에 대해 배우고 기록한다.
Watch 속성이란?
데이터의 변형을 감지하고 계산을 수행하는 함수로, 기본적으로 Computed 속성과 매우 유사하다.
- watch 속성은 computed 속성보다 코드의 양이 늘어나게 되지만, Computed 속성을 쓸 수 없을 상황에서 유용하다.
사용법
기본적으로 data에 등록한 값을 watch: 영역에 함수 형태로 등록하면 된다. 이때 기본적으로 oldValue(전 값), newVal을 받는다.
구현하면 다음과 같다.
data:{
message: '예제',
updateVal: '아니오'
}
watch:{
message(newVal, oldVal)}{
console.log(oldVal, newVal);
this.updateVal = '네';
}
}이렇게 했을 경우 data의 값이 변경되었을 시 인식하여, watch가 수행되게 된다(감시자 역할)
실습 input 태그에 값을 입력했을 때 watch 발동
<body>
<div id = "app">
{{person.name}}
{{nextYear()}}
{{text}}
<input type ="text" @keyup = "updateText">
<form v-on:submit= "validate">
<button>이럴 순 없어</button>
</form>
<div>{{changeMessage}}</div>
</div>
<script>
new Vue({
el: '#app',
data:{
person:{
name : 'kkd4116'
},
text:'아무것도 없음',
changeMessage:''
},
methods:{
nextYear: function(){
return this.person.name+"이 내 이름이다.";
},
validate: function(){
alert("validate");
return false;
},
updateText: function(event){
this.text = event.target.value;
}
},
computed:{
},
watch:{
text(newVal, oldVal){
this.changeMessage = '바뀌었음';
}
}
});
</script>
</body>간단한 결과
입력 전
입력 후
늦은만큼 코막고 달려!