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是最有用的。