What is 'watch' property in Vue

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
    }
  }
})

일반적으로 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복이 적은 등 우수하다고 평가하는 경향이 있다고 한다.