监听器是一个对象,以key-value 的形式表示。key 是需要监听的表达式,value 是对应的回调函数。value 也可以是方法名,或者包含选项的对象。Vue 实例将会在实例化时调用$watch() 遍历watch 对象的每一个property 。同时,当差值数据变化时,执行异步或开销较大的操作时,可以通过采用监听器的方式来达到目的。下面讲解解监听器的用法。
监听器在Vue
实例的watch
选项中定义。它包括两个参数,第一个参数是监听数据的新值,第二个是旧值。
下面示例监听了data() 函数中的message 属性,并在控制台中打印新值和旧值。
【例7.1 】使用监听器(源代码\ch07\7.1.html )。
时: 分钟:
在Chrome 浏览器中运行程序,这里将分别监听数据属性time 和minute 的变化,当其中一个数据的值发生变化时,就会调用对应的监听器,经过计算得到另一个数据属性的值,结果如图7-1 所示。

注意,不要用箭头函数来定义watch 函数。例如:
time:(val) =>{
this.time = val;
this.minute = this.time*60
}
因为箭头函数绑定了父级作用域的上下文,所以this 将不会按照期望指向Vue 实例,this.time 和this.minute 都是undefined 。
