当有一些数据需要随着其它数据变动而变动时，很容易滥用 watch，对于任何复杂逻辑，应当使用计算属性（computed），计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。Vue 提供了一种通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性（watch）。当需要在数据变化时执行异步或开销较大的操作时，使用侦听属性，比如在搜索框，输入文本后向后台请求搜索结果的场景。下面的例子是在用户输完后等待1秒再发起网络数据请求。
1、需要引入两个js库
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
2、html代码
<div id="app">
<input v-model="question"></input>
<p>{{answer}}</p>
</div>
3、js代码
var main = new Vue({
data: {
question: "",
answer: ""
},
watch: {
question: function (oldQuestion, newQuestion) {
this.answer = "waiting...."
this.debouncedGetAnswer();
}
},
created: function () {
this.debouncedGetAnswer = _.debounce(this.getAnswer, 1000)
},
methods: {
getAnswer: function () {
this.answer = "think..."
var self = this;
axios.get('https://yesno.wtf/api')
.then((res)=>{
self.answer=res.data.answer
}).catch((error)=>{
self.answer = error
})
}
}
}).$mount("#app")
示例中，使用 watch 选项允许执行异步操作 (访问一个 API)，限制执行该操作的频率，并在得到最终结果前，设置中间状态。
