watch의 개념
:특정 데이터의 변화를 감지하여 자동으로 특정 로직을 수행해주는 속성
1. 사용법
<template>
<div id="app">
<input type="text" v-model="message" />
</div>
</template>
<script>
export default {
data() {
return {
message: "",
};
},
watch: {
message: function (value) {
console.log("value", value);
},
},
};
</script>
👉 <input type="text" v-model="message" />
사용자가 input에 텍스트를 입력하면 data의 message에 데이터가 동적으로 바인딩이 된다.
👉 message: function (value) { console.log("value", value); }
- 사용자가 input에 텍스트를 입력할때 마다 message에 데이터가 동적으로 바인딩된다. watch는 message의 값이 변경이 발생될 때마다 watch의 message 메소드가 실행되어 console.log("value", value)가 실행 된다.
- 주의점은 감시할 타켓명이 watch에 동일한 이름으로 사용해야한다. data에 message를 감시할려면 watch에도 동일한 이름인 message를 key값으로 해야한다.
2. 다른 사용법
1) new, old값
<template>
<div id="app">
<input type="text" v-model="message" />
</div>
</template>
<script>
export default {
data() {
return {
message: "",
};
},
watch: {
message(newValue, oldValue) {
console.log("newValue", newValue);
console.log("oldValue", oldValue);
},
},
};
</script>
👉 message(newValue, oldValue) { ... }
- newValue는 현재 message에 바인딩된 값을 가지고 있다.
- oldValue는 현재 message에 바인딩된 데이터 바로 이전의 값을 가지고 있다.
input창에 유희왕이라고 쳤을 경우, oldValue는 유희이고 newValue는 유희왕이다.
2) 함수로 지정
watch: {
message: "setMethod",
},
methods: {
setMethod(value) {
console.log("watch message value", value);
},
},
};
👉 message: "setMethod"
watch에 메소드로 사용해도 되지만 함수로 따로 빼서 정의 할 수 있다. 함수명(setMethod)을 문자열로 정의하면 methods에 정의된 함수가 실행 된다.
3-1) 객체 감시하기 (객체 전체)
<template>
<div id="app">
<input type="text" v-model="message.title" />
<input type="text" v-model="message.contents" />
</div>
</template>
<script>
export default {
data() {
return {
message: {
title: "",
contents: "",
},
};
},
watch: {
message: {
handler: function (val) {
console.log("val", val); // {title: '', contens: '변경'}
},
deep: true,
},
},
};
</script>
👉 message: { handler: function () { ... }, deep: true }
- message객체에 title, contents 중 한개라도 변화가 감지되면 watch에 message가 실행된다.
- handler, deep은 객체 전체를 watch하기 위한 문법이다.
- watch 속성에는 다음과 같은 option을 부여할 수 있다.
- deep 속성은 감시 대상 데이터가 하위 속성을 가지고 있는 객체인 경우, 그 하위 속성의 변경까지 감시한다.
- immediate 속성은 컴포넌트가 호출되었을 때, 그 컴포넌트의 watch 대상 데이터를 바로 읽을지 여부를 결정하는 것이다. false 이면 대상 데이터가 변경이 일어났을 때, watch에서 지정한 로직이 수행된다.
3-2) 객체 감시하기 (개별)
<template>
<div id="app">
<input type="text" v-model="message.title" />
<input type="text" v-model="message.contents" />
</div>
</template>
<script>
export default {
data() {
return {
message: {
title: "",
contents: "",
},
};
},
watch: {
"message.title": function (val) {
console.log("val", val);
},
"message.contents": function (val) {
console.log("val", val);
}
},
};
3. computed와 watch의 비교
While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That’s why Vue provides a more generic way to react to data changes through the watch option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data.
공식문서에 따르면 대부분 "computed 속성이 적합하지만, 사용자가 특정 지정한 값을 감시하는 경우을 위해 watch를 사용한다"라고 말한다.
- 데이터를 업데이트 할 때 비동기처리나 무거운 처리(많은 처리)를 실행하고 싶은 경우 편리하다.
- 감시할 데이터를 지정하고 그 데이터가 바뀌면 선언한 함수를 실행하라는 방식으로 명령형 프로그래밍이다. 그러나 computed속성은 계산해야 하는 목표 데이터를 정의하는 방식으로 선언형 프로그래밍이다. 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있다고 한다.
