有时你可能想要观察数据的变化和反应。通常，我们会使用计算属性（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: '',
        results: [],
        isSearching: false
    },
    watch: {
        searchQuery: function (query) {
            this.isSearch = true
            console.log(query)
        }
    }
})

为了让体验更佳，接下来在searchQuery中添加一个setTimeout函数，并在500ms后运行这个函数，以模拟从服务器检索结果。

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

            setTimeout(() => {
                console.log(this)
            },500)
        }
    }
})

在这个函数中，我们需要更新我们的搜索结果results属性。但是我们不能在这使用这个函数，那是因为现在的作用范围不同。同样先做个测试，观察者先监视searchQuery，并把搜索的值打印到控制台，然后借助setTimeout函数，延迟500ms把this打印到控制台。我们看到的效果是，每次在input中输入值时，控制台会对应的打印出你的输入值，并且在500ms后会将Vue实例打印出来。能在嵌套函数中访问到Vue的实例，那是因为我们使用了ES6的箭头函数，如果不是箭头函数，你访问到的是window对象。

另外一种方法是比较老的技巧，将this分配给一个变量，然后在嵌套函数中引用它。我常喜欢将其添加给一个