[Vue] Vue.js watch 옵션

watch는 데이터의 값이 변경될 때 실행되는 함수이다.

 

data: {
	oldData: '',
},
watch: {
	oldData: function(newData) {
    	// 원하는 동작
    }
}

 

oldData의 값이 변할 때 watch는 변화된 값을 함수의 인자로 받아 함수를 실행시킨다.

 

데이터의 변화에 따라 특정한 로직이 작동되어야 하는 경우 유용하다. 

watch 옵션은 기능상 매우 우용하지만, 너무 많이 사용하면 부수효과가 많이 생길 수 있다. 같은 값을 서로 다른 컴포넌트에서 관찰하고 서로 다른 로직이 실행되는 경우 에러가 발생할 수 있기 때문이다. 컴퍼넌트의 구조가 복잡하다면 그 에러를 발견해 고치기 어렵다. 

 

[참고 사이트]

Vue.js watch옵션 (감시자) : 네이버 블로그 (naver.com) 

computed와 watch — Vue.js (vuejs.org)