watch 속성은 다음과 같이 생성한다.
const app = Vue.createApp({
//...(생략)...
watch:{
//기본 watch
//v는 변경된 값, p는 변경 직전의 값
항목명:function(v, p){},
//deep(깊은) watch
항목명:{
deep:true,
handler(v, p){}
},
}
//...(생략)...
});
watch는 일반적인 watch와 deep watch로 나뉘며, 이 문서에서는 일반적인 watch를 다룬다.
아래의 예제는 text 항목의 변경(revision) 횟수를 측정하는 예제이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue watch</title>
</head>
<body>
<div id="app">
<input type="text" v-model="text">
<br>
revision count : {{revision}}
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data(){
return {
text : "Welcome to Vue JS 3!",
revision:0
};
},
watch:{
text:function(){
this.revision++;
},
}
});
app.mount("#app");
</script>
</body>
</html>
실행한 뒤 입력창의 글자를 변경하면 변경할 때마다 revision count가 증가하는 것을 확인할 수 있다. 이는 computed 속성에서 수행하기 어려운 작업이다.
