观察者(Watcher)

Vue watchers 以编程方式观察组件数据，并在特定属性发生变化时运行。观察数据可包含两个参数：oldVal 和 newVal。这有助于您在编写表达式时，在写入或绑定新值之前比较数据。观察者可以观察对象(object)以及字符串(string)、数字(number)和数组(array)类型。观察对象时，只有当整个对象发生变化时才会触发处理程序。

在第 1 章 "开始第一个 Vue 项目" 中，我们介绍了在组件生命周期的特定时间运行的生命周期钩子。如果在 watcher 上将 immediate 键设置为 true，那么当该组件初始化时，它将在创建时运行该监视器。您可以通过包含键和值(deep: true，默认为 false)来监视任何给定对象内部的所有键。要清理监视器代码，您可以为已定义的 Vue 方法指定一个处理程序参数，这是大型项目的最佳做法。

观察者可以补充计算数据的使用，因为它们可以被动地观察值，并且不能像普通 Vue 数据变量那样使用，而计算数据必须始终返回值，并且可以查找。请记住，除非不需要 Vue 上下文，否则不要使用箭头函数。

下面的观察器示例演示了 immediate 和 deep 可选键；如果 myDataProperty 对象内部的任何键发生变化，都会触发控制台日志：

watch: {
    myDataProperty: {
        handler: function(newVal, oldVal) {
            console.log('myDataProperty changed:', newVal, oldVal)
        },
        immediate: true,
        deep: true
    },
}

现在，让我们在观察者的帮助下设置一些新值。

练习2.03：使用观察者设置新值

在本练习中，您将使用观察器参数来观察数据属性的更改，然后使用此观察器通过方法设置变量。

要访问本练习的代码文件，请参阅 https://packt.live/350ORI4 。

打开命令行终端，导航到 Exercise 2.03 文件夹，然后按顺序运行以下命令：
```
> cd Exercise2.03/
> code .
> yarn
> yarn serve
```
转到 https://localhost:8080 。

通过添加折扣和带有某种样式的 oldDiscount 数据变量来设置文档：

<template>
    <div class="container">
        <h1>Shop Watcher</h1>
        <div>
            Black Friday sale
            <strike>Was {{ oldDiscount }}%</strike>
            <strong> Now {{ discount }}% OFF</strong>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            oldDiscount: 0,
            discount: 5,
        }
    },
}
</script>

<style lang="scss" scoped>
.container {
  margin: 0 auto;
  padding: 30px;
  max-width: 600px;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  margin: 0;
}
a {
  display: inline-block;
  background: rgb(235, 50, 50);
  border-radius: 10px;
  font-size: 14px;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
}
</style>

通过将 discount 属性添加到 watch 对象来观察 discount 属性。触发一个名为 updateDiscount 的方法。在该方法内，将 oldDiscount 数据属性设置为 this.discount + 5：
```
watch: {
    discount(newValue, oldValue) {
        this.oldDiscount = oldValue
    },
},
```

包含一个可以增加 discount 变量并触发观察者的方法：

methods: {
    updateDiscount() {
        this.discount = this.discount + 5
    },
},

现在添加一个换行符和一个锚元素，其中 @click 指令绑定到 updateDiscount 方法：

<br />
<a href="#" @click="updateDiscount">Increase Discount!</a>

上述命令的输出如下：

Figure 1. Figure 2.5: A shop watcher page should look something like this

在本练习中，我们了解了当 Vue 组件中的其它方法更改数据时，如何使用观察者来观察和响应性地操作数据。

在下一节中，我们将学习 deep 观察的概念。