Vue.js 3.x监听器的用法与示例

监听器是一个对象,以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


请使用浏览器的分享功能分享到微信等