特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
有时你可能想要观察数据的变化和反应。通常,我们会使用计算属性(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实例的顶层,类似于data
、methods
和computed
。
这个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的观察者在监视searchQuery
。那么我们把实际需要的搜索逻辑放到这个函数当中。我们要做的第一件事是将isSearch
属性的值设置为true
,表明我们正在等待从服务器返回的搜索结果。与methods
一样,将使用这个关键字来访问观察者内的函数。
let app = new Vue({
el: '#app',
data () {
searchQuery: '',
result
如需转载,烦请注明出处:https://www.w3cplus.com/vue/vue-watch.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!