侦听器

本节目标：理解“侦听器”的核心思路，并能把它用于实际开发或面试表达。 ==虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。==

==这就是为什么== ==Vue== ==通过== ==watch== ==选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。==
==例如：==
==<div id====="watch-example"====>======  ==<p>======    ==Ask a yes/no question:======    ==<input v-model====="question"====>======  ==</p>======  ==<p>===={{ answer }}====</p>========</div>==
==<!--== ==因为== ==AJAX== ==库和通用工具的生态已经相当丰富，====Vue== ==核心代码没有重复== ==-->========<!--== ==提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。== ==-->========<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>========<script>========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()======    ==}======  ==},======  ==created:== ==function== ==() {======    ==// `_.debounce`== ==是一个通过== ==Lodash== ==限制操作频率的函数。======    ==//== ==在这个例子中，我们希望限制访问== ==yesno.wtf/api== ==的频率======    ==// AJAX== ==请求直到用户输入完毕才会发出。想要了解更多关于======    ==// `_.debounce`== ==函数== ==(====及其近亲== ==`_.throttle`)== ==的知识，======    ==//== ==请参考：====https://lodash.com/docs#debounce======    ==this====.debouncedGetAnswer = _.debounce(====this====.getAnswer,== ==500====)======  ==},======  ==methods: {======    ==getAnswer:== ==function== ==() {======      ==if== ==(====this====.question.indexOf(===='?'====) ===== ==-1====) {======        ==this====.answer === =='Questions usually contain a question mark. ;-)'======        ==return======      ==}======      ==this====.answer === =='Thinking...'======      ==var== ==vm === ==this======      ==axios.get(===='https://yesno.wtf/api'====)======        ==.then(====function== ==(response) {======          ==vm.answer = _.capitalize(response.data.answer)======        ==})======        ==.catch(====function== ==(error) {======          ==vm.answer === =='Error! Could not reach the API. '== ==+ error======        ==})======    ==}======  ==}========})========</script>==
==结果：==
Ask a yes/no question:
I cannot give you an answer until you ask a question!
==在这个示例中，使用== ==watch== ==选项允许我们执行异步操作== ==(====访问一个== ==API)====，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。==
==除了== ==watch== ==选项之外，您还可以使用命令式的== ==vm.$watch API====。==

> 来自

 <https://cn.vuejs.org/v2/guide/computed.html>