Watch (监听) 用于实时监听data里面的值的变化。

var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!'},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'this.debouncedGetAnswer()}}
})

上面代码，在watch 添加question属性的监听器。
注意：监听器的命名要和被监听的属性的命名一样。

上面就是watch 的简单运用的。那么，如果data有这样一个属性呢？

 data: {question: '',answer: 'I cannot give you an answer until you ask a question!',food:{apple:'',meat:''}},

现在，我要监听food 里面的meat。该如何编写呢？
很简单，我们只需这样子写：

watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'this.debouncedGetAnswer()},'food.meat':function(newVal, oldVal){alert(oldVal +'-'+newVal);}}

整体代码如下：

var watchExampleVM = new Vue({el: '#watch-example',data: {question: '',answer: 'I cannot give you an answer until you ask a question!',food:{apple:'',meat:''}},watch: {// 如果 `question` 发生改变，这个函数就会运行question: function (newQuestion, oldQuestion) {this.answer = 'Waiting for you to stop typing...'this.debouncedGetAnswer()},'food.meat':function(newVal, oldVal){alert(oldVal +'-'+newVal);}}
})