Vue
Vue watch의 속성
hjcode
2022. 11. 7. 16:45
immediate
watch는 속성의 값이 변할때마다 실행되지만,
변경과 관계없이 처음 실행해야 하는 경우가 있다.
watch: {
myData(value) {
}
},
페이지가 처음 로드될때 watch로 바라보는 값이 기본값으로 설정된다.
이때는 속성이 변경이 되지 않아 watch는 실행이 되지않는다.
immediate: true로 설정하고 핸들러 함수를 아래처럼 옮긴다.
watch: {
myData: {
immediate: true,
handler(value) {
// ...
}
}
},
deep
const array = [1, 2, 3, 4];
array.push(5);
array.push(6);
array.push(7);
// array = [1, 2, 3, 4, 5, 6, 7]
위와 같이 배열을 업데이트 해줬지만 watch에서는 감지가 되지 않는다.
배열이나 객체를 watch할 때 속성의 내부를 검사하기 위해서는 deep: true를 설정해주고
handler메서드를 사용하여 원하는 값을 얻을 수 있다.
watch: {
myData: {
deep: true,
handler(value) {
// ...
}
}
},
handler
handler는 watch된 속성이 변경될 때 호출될 함수를 지정한다.
deep, immediate를 지정할 필요가 없는 경우 사용하는 단축표현이다.
단축표현 대신 아래처럼 사용할 수 있다.
watch: {
myData(value) {
// ...
}
},
watch: {
myData: {
handler(value) {
// ...
}
}
},
반응형