4.1.4　watch函数

Vue提供了一种通用的方式来观察和响应Vue实例上的数据变动，那就是watch属性。watch属性是一个对象，它有两个属性：一个是键；另一个是值。键是需要观察的表达式，值是对应回调函数，回调函数得到的参数为新值和旧值。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。

提示：不应该使用箭头函数来定义watch函数。

代码如下：

运行的效果如图4-7所示。

图4-7　watch运行效果图

在上面所显示的代码中，当a的值发生变化时，通过watch的监控，message输出相应的内容。

除了使用数据选项中的watch方法以外，还可以使用实例对象的$watch()，该方法的返回值是一个取消观察函数，用来停止触发回调。代码如下：

在上面的代码中，当a的值更新到1时，触发unwatch()来取消观察。单击按钮时，a的值仍然会变化，但是不再触发watch的回调函数。