Vue Watchers란?
watchers는 Vue.js에서 데이터 변경을 감지하고, 특정 데이터가 변할 때마다 반응형으로 특정 작업을 수행할 수 있는 방법을 제공합니다. 즉, 데이터가 변화할 때 이를 감시(watch) 하고 그에 맞는 로직을 수행할 때 유용합니다. computed와 달리 복잡한 비동기 작업이나, 특정 데이터를 기반으로 별도의 로직을 수행할 때 주로 사용됩니다.
기본 사용 예
watch: {
// 감시할 데이터인 'count'
count(newValue, oldValue) {
console.log(`count가 ${oldValue}에서 ${newValue}로 변경되었습니다.`);
}
}
위 예에서 count 값이 변경되면 watch가 감지하여, 새로운 값과 이전 값을 매개변수로 받아 로직을 실행합니다.
Vue Watchers의 특징:
- 감시 대상 지정:
watch는 Vue 컴포넌트의data,props,computed등의 값을 감시할 수 있습니다. - 비동기 작업에 적합: 서버 요청과 같이 복잡한 로직을 감지할 때
watchers가 유용합니다. - oldValue와 newValue: 감시 대상이 변경될 때, 변경된 값(
newValue)과 변경 이전 값(oldValue)을 사용할 수 있습니다. - 깊은 감시(Deep Watch): 객체나 배열 내의 깊은 속성 변화를 감시하려면
deep: true옵션을 사용합니다.
Watcher 기본 구문
watch: {
// 감시할 데이터 또는 계산된 속성
count(newValue, oldValue) {
console.log('count가 변경되었습니다:', newValue);
}
}
비동기 예시
비동기 작업에서 watch를 사용하면 유용합니다. 예를 들어, 사용자가 입력 필드에 값을 입력할 때마다 서버로 요청을 보내고 싶다면, watch를 사용할 수 있습니다.
watch: {
searchQuery(newQuery) {
// 사용자가 입력할 때마다 API 요청을 보냄
this.fetchSearchResults(newQuery);
}
},
methods: {
fetchSearchResults(query) {
// 서버에서 검색 결과를 가져오는 비동기 작업
axios.get(`/api/search?q=${query}`).then(response => {
this.results = response.data;
});
}
}
deep 옵션
객체나 배열 같은 복합 데이터 타입을 감시하려면 deep 옵션을 사용해야 합니다.
watch: {
user: {
handler(newValue, oldValue) {
console.log('user 객체가 변경되었습니다:', newValue);
},
deep: true // 객체 내부의 속성 변화를 감지함
}
}
immediate 옵션
watch는 기본적으로 데이터가 변경될 때만 실행됩니다. 하지만 immediate: true 옵션을 설정하면, 처음부터 즉시 한 번 실행됩니다.
watch: {
count: {
handler(newValue) {
console.log('처음 실행 또는 count 변경됨:', newValue);
},
immediate: true // 즉시 실행
}
}
watch vs computed
computed: 데이터에 의존하여 자동으로 값을 계산하고 결과를 캐시합니다. 단순히 데이터를 계산하거나 포맷하는 데 적합합니다.watch: 특정 데이터 변화를 감지하고, 그 변화를 기반으로 비동기 작업이나 외부 데이터를 가져오는 등 복잡한 로직을 수행하는 데 유용합니다.
언제 watch를 사용해야 하나?
- 비동기 작업: 데이터 변경에 따라 API 요청을 보내거나 타이머, 파일 처리 등의 작업을 해야 할 때.
- 외부 상태 관리: 다른 상태 변화를 트리거하거나 외부 데이터에 반응해야 할 때.
넙-죽