- Vue에서
watch
속성을 사용하여 데이터 변경을 감지하고 반응 할 수 있으며,
데이터 변경 결과에 따라 추가 반응 및 데이터 조작도 가능하다.- API 엑세스(비동기 연산)을 수행하고 최종응답을 얻을 때 까지 중간 상태를 설정 할 수도 있다.
- 비동기식 이거나 시간이 많이 소요되는 작업을 수행하려고 하는 경우
watch
를 유용하게 사용할 수 있다.
watch: {
<감시 대상 데이터>: function(<새로운값>, <이전 값>){
// 감시 대상 데이터가 변했을 때, 처리 로직
} }
💡 watch가 변경값(=새로운 값, 이전값)을 가지지 않는 경우 아래와 같은 형태로 사용한다.
watch: {
<감시 대상 데이터> : function(){
// 감시 대상 데이터가 변했을 때, 처리 로직
} }
immediate : true
페이지를 처음 로드할 때 데이터 값의 변화가 없으므로
watch
가 실행되지 않는다
하지만watch
를 사용해야만 데이터를 가져올 수 있는 경우,
페이지를 처음 로드시watch
가 작동하지 않기 때문에 데이터를 가져오지 못한다
상황에 따라 데이터 값이 변하지 않아도watch
를 실행해야하는 경우가 있는데
💡 이때 필요한 옵션이immediate
이며,
페이지 로드시 바로watch
가 실행되도록 해주는 옵션이다.
값은 true로 설정해준다.
deep : true
Vue는 위와 같은 이유로 object 내부 값의 변화를 감지할 수 없다.
💡 이때deep
옵션을 사용하여 값을 true로 설정해 주면 object의 내부의 변화까지 감지가 가능하다.
handler
watch: {
movie: {
handler(movie) {
// Fetch data about the movie
fetch(`/${movie}`).then((data) => {
this.movieData = data;
});
}
}
}
단축하여 아래처럼 함수를 직접 지정할 수도 있다
watch: {
movie(movie) {
// Fetch data about the movie
fetch(`/${movie}`).then((data) => {
this.movieData = data;
});
}
}
<template>
<div>
<input type="text" v-model="message" />
</div>
</template>
export default {
watch:{ message :function(value){
console.log("value=>", value)
} },
}
👉실행결과
<template>
<div>
<input type="text" v-model="id" />
<input type="text" v-model="name" />
</div>
</template>
import { watch } from '@vue/runtime-core';
export default {
setup () {
const state = reactive({
id : 'aaa',
name : 'bbb',
});
// 배열의 변수 변경 감지
watch(state, () => {
console.log('state변수 변경 =>', state)
});
// 배열 내부값 변경 감지 (특정변수, 변수 하위에 있는 변수값 감지)
watch(() => state.name, () => {
console.log('state.name변수 변경 =>', state.name)
},{
immediate : true,
deep : true
});
return { state, ...toRefs(state) }
}
}
👉실행결과
state 변수에 id, name 중 하나라도 변화가 감지되면
➡️ console.log('state변수 변경 =>', state)
가 실행된다
state.name만 변화 하면 state.name의 변화를 감지하는
➡️ console.log('state.name변수 변경 =>', state.name)
만 실행된다.
watch
속성은 computed
속성과 비슷한 방식으로 작동한다.
하지만 watch
는 부수효과 처리를 위하여 사용된다.
컴포넌트의 상태를 변경하고 싶을때는 computed
를 사용하는 것이 좋다
부수 효과
는 컴포넌트 외부의 동작이나 비동기 처리를 말한다.
- 데이터를 가져오는 것 (Fetching data)
- DOM 조작하기
- 로컬 저장소 또는 오디오 재생과 같은 브라우저 API 사용
이러한 변화들은 직접 컴포넌트에 영향을 주지 않으므로부수 효과
로 간주한다.
부수 효과
에 대한 작업이 아니라면 computed
을 사용하는 것이 좋다.
computed
는 다른 변화에 대한 응답으로 계산을 업데이트해야 하는 상황에서 대부분 사용되며, 선언형 프로그래밍인 computed
가 명령형 프로그래밍인 watch
보다 코드 반복이 적고 간결하여 많이 사용된다.
🌎 참고
https://augustines.tistory.com/213
https://pygmalion0220.tistory.com/entry/Vue-Watch
https://ui.toast.com/weekly-pick/ko_20190307