watch
watch 속성은 data() 안의 state의 변화를 감지하여 특정 로직을 수행하게 해주는 속성입니다.
watch 형식
new Vue({
data() {
return {
message: "Hello"
}
},
watch: {
message: (newVal, preVal)=> {
console.log(newVal)
}
}
})message state가 바뀔 때마다 watch안에 정의한 메서드가 수행되게 됩니다.
watch 응용 문법
watch 속성에 메서드 함수를 연결
new Vue({
data() {
return {
message: "Hello"
}
},
methods: {
sendMessage() {
/* Message를 보내는 Logic */
}
},
watch: {
message: 'sendMessage'
}
})핸들러와 초기 실행 옵션
new Vue({
data() {
return {
message: "Hello"
}
},
watch: {
message: {
handler(newVal, preVal) {
},
immediate: true /* 컴포넌트가 생성되자마자 즉시 실행 */
}
}
})immediate는 변경과 관계 없이 처음 한 번 실행해야 하는 경우에 true값을 준다. handler는 state가 변경되었을 때 실행할 함수를 지정한다.
deep을 사용하여 true, false를 줄 수도 있는데 watch를 사용하여 객체나 배열을 감시할 경우 내부가 변경됬다고 파악하지 못하기 때문에 내부를 검사하길 원한다고 vue에게 알려주어야 하므로 그때 deep: true를 준다.
🎢