watch는 뷰 인스턴스의 어떤 데이터가 변경되면 이를 감지해주는 기능이다.
뷰 인스턴스 내 watch를 선언하고 어떤 변수를 watch 할 것인지, 어떤 행위를 할 것인지 정해주면 된다.
코드로 알아보자.
<body>
<div id="app">
{{num}}
<button v-on:click="addNum">increase</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
new Vue({
el: '#app',
data : {
num : 10
},
watch:{ //#1. watch : num이란 변수가 변경될 때 마다
num : function () {
this.logText(); // #2. logText(); 함수를 호출할 것이다.
}
},
methods : {
addNum: function(){
this.num = this.num + 1 ;
},
logText : function(){
console.log('changed');
}
}
});
</script>
</body>
이 코드는 아래와 같이 실행된다.
버튼이 눌릴 때마다 num값이 증가하고, num값의 변화를 watch가 감지하고 있다가 콘솔로그를 출력한다.
computed 와 watch 둘 다 특정 데이터가 변경되면 실행되는 속성이라는 점은 같지만, 뷰 공식문서에서는 watch보다 computed를 사용할 것 을 권장하고 있다. 캐싱이나 튜닝이 더 잘되어 있기 때문이다.
Vue does provide a more generic way to observe and react to data changes on a Vue instance: watch properties. When you have some data that needs to change based on some other data, it is tempting to overuse watch - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative watch callback.
해당 포스팅은 인프런의 Vue.js 시작하기 - Age of Vue.js 학습 후 정리한 내용임을 알려드립니다.
'Study > Vue' 카테고리의 다른 글
| Vue.js 시작하기 11. 싱글컴포넌트 사용하여 개발 시작하기 (0) | 2022.01.22 |
|---|---|
| Vue.js 시작하기 10. Vue CLI (0) | 2022.01.22 |
| Vue.js 시작하기 08. 템플릿 (0) | 2022.01.22 |
| Vue.js 시작하기 07. HTTP 통신 라이브러리 - axios (0) | 2022.01.22 |
| Vue.js 시작하기 06. 뷰 라우터 (0) | 2022.01.20 |