Vue에서는 인스턴스의 데이터 변경을 관찰하고 이에 반응하는 보다 일반적인 watch속성을 제공한다.
이 말은 쉽게하면 특정 태그 (input태그, textarea태그)에서 입력할때 변수를 바라보고 있다가 변경될때마다 watch()를 호출한다.
ex) 입력이 되고 있을때 특정 버튼을 활성화 시킬때
따라서 watch속성은 감시할 데이터를 지정하고 그 데이터가 바뀌면 이런 함수를 실행하라는 방식으로 소프트웨어 공학에서 이야기하는 '명령형 프로그래밍'방식이다.
/** index.html **/
<div id="demo">{{ fullName }}</div>
/** index.js **/
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
이런 식으로 사용하는데 computed속성을 이용할 수도 있다.
/** index1.js **/
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
일반적으로 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있다고 한다.