Vue Watch 란?
먼저
공식홈페이지에서의 설명.
특정데이터소스를 감시, 다른 콜백함수 내에서 부작용을 적용할 필요가 있음. ( lazy ) 감시하고 있는감시하고있는 데이터소스가 변경될 때에만 콜백함수가 실행됨.
뭔말이고
쉽게 말하자면,
특정 data(데이터)나 computed(계산속성)의 상태를 감시하고, 변화가 있을 때 미리 등록해 둔 처리를 자동적으로 실행해 주는 구조.
더 쉽게 설명하자면,
감시하고싶은 대상이 있는데 그 감시 대상에 무언가 변화가 일어나면, 등록한 처리를 자동으로 해주는것.
잡설)
공부하면서 느낀 watch는 예를 들어보자면,
학교에 내가 좋아하는 남자애가 있는데 다른반이야, 그 애의 일거수일투족 관심을 가지고있지만, 다른 반이기 때문에 그렇질 못해. 그래서 그 아이와 같은 반인 친구를 섭외해서 그 친구의 상태를 감시? 해서 나에게 보고를 해달라고 요청을 한다. 하지만, 모든걸 다 감시하지는 말고, 섭외한 친구는 자기 일을 하면서 혹시 특정한 일이 발생하면(예를 들어 다른 여자애와 친근하게 대화를 한다거나, 달콤한 분위기라거나) 그때만 나에게 보고를 해줘.
이런 느낌이 아닐런지? ..
넘어가서
기본적인 작성방법을 살펴보면
watch: {
감시할 데이터: function(새로운값, 이전의값) {
//감시대상이 변했을 때 자동으로 실행할 처리를 여기에 기재.
}
}
이렇게 사용할수 있다.
간단한 사용방법
<script>
export default {
data() {
return {
someObject: {}
}
},
watch: {
someObject: function(val, oldVal) {
console.log('changed!') }
}
}
</script>
여기에서 데이터로 정의한 someObject라는 객체를 watch로 감시하고있다.
someObject에 무언가 변화가 있을 때마다 watch가 실행되어 changed! 라는 문자열이 출력된다.
이상.