Vue学习- 侦听器使用

当有一些数据需要随着其它数据变动而变动时，很容易滥用 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)，限制执行该操作的频率，并在得到最终结果前，设置中间状态。