vue中的侦听属性

HTML：

<div id="demo">{{ fullName }}</div>

Vue：

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

watch中的firstName为一个方法，但是该方法监听的vue实例vm中同名的data属性firstName。

此方法名必须与需要监听的data属性名一致才能实现有效的监听。

如将HTML改为

<input v-model="firstName">
<div id="demo">{{ fullName }}</div>

然后将vm实例watch中的firstName方法改为firstName1则当输入内容的时候无法实现对firstName进行监听。
当然watch一般不这样用，这里用计算属性。当需要在数据变化时执行异步或开销较大的操作时，watch是最有用的。