Vue 2.0的学习笔记:Vue的观察者

有时你可能想要观察数据的变化和反应。通常,我们会使用计算属性(computed,但是有些场景需要实现定制的监视程序。在我们讨论何使使用观察者之前,让我们先看一个如何使用它们的例子。我们将构建一个Live搜索,当我们在文本框输入关键词时,它将返回搜索结果。我们使用JavaScript的setTimeout函数来模拟从API中抓取结果。

我已经准备好了模板以及一些数据属性。到目前为止,它只将文本的value值绑定到data中的searchQuery属性。而搜索结果将存储在results中,该属性将是字符串数组。为了判断我们是否在获取搜索结果,我将使用一个isSearching布尔属性。这是我们以前见过的。

<!-- HTML -->
<div id="#app">
    <input type="text" v-model="searchQuery" />
    <p v-if="isSearching">Searching...</p>
    <div v-else>
        <ol>
            <li v-for="result in results">{{ result }}</li>
        </ol>
    </div>
</div>

let app = new Vue({
    el: '#app',
    data () {
        searchQuery: '',
        results: [],
        isSearching: false
    }
})

searchQuery属性的值发生变化时,我想触发一个搜索,那我该怎么做呢?我们可以用一个叫做观察者的东西。观察者是当他们监视数据属性值发生变化时被调用的函数。因此,我们将一个观察者与一个数据属性关联起来。观察者被添加到一个名为watch属性中,该属性被添加到Vue实例的顶层,类似于datamethodscomputed

这个watch具有和前面介绍的methods具有相同的语法,但是有一个关键的区别。虽然嵌套属性的值确实是函数,但键的名称必须对应数据属性中的名称。因此,如果我们想要查看searchQuery数据属性的更改,我们需要在watch中输入searchQuery作为我们观察者的键(key)。

let app = new Vue({
    el: '#app',
    data () {
        searchQuery: '',
        results: [],
        isSearching: false
    },
    watch: {
        searchQuery: function (query) {

        }
    }
})

这就是我们告诉Vue的方法。观察者监视和响应数据属性。注意,我们向监视的函数添加了一个参数。这是数据属性的新值,当searchQuery的值发生变化时,该值作为Vue的参数传递。为了向您展示,每当数据属性被更改时,这个函数确实被调用,我将新值记录到控制台。我们在searchQuery中添加一个console.log(query),尝试在input输入内容,你在控制台上就可以看到相应的值。

Vue的观察者

在键入时,我们可以看到在控制台中正在输出的搜索查询。

上面是为了向大家演示,Vue的观察者在监视searchQuery。那么我们把实际需要的搜索逻辑放到这个函数当中。我们要做的第一件事是将isSearch属性的值设置为true,表明我们正在等待从服务器返回的搜索结果。与methods一样,将使用这个关键字来访问观察者内的函数。

let app = new Vue({
    el: '#app',
    data () {
        searchQuery: '',
        result
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-watch.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部