栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Java

130-Vue中的监听事件——Watch

Java 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

130-Vue中的监听事件——Watch

Watch

watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态。

简单点说,就是实时监听某个数据的变化。

1、普通监听



 
2、立即监听

如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。




 

immediate需要搭配handler一起使用,其在最初绑定时,调用的函数也就是这个handler函数。

3、深度监听

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能够监听到变化,此时就需要deep属性对对象进行深度监听。




 

注意:

1、如果监听的数据是一个对象,那么 immediate: true失效;

2、一般使用于对引用类型的监听,深度监听,如监听一个Object,只要Object里面的任何一个字段发生变化都会被监听,但是比较消耗性能,根据需求使用,能不用则不用。

3、因为上面代码obj是引用数据类型,val, oldVal指向一致,导致看到的结果一样。


4、deep优化

我们可以通过点语法获取对象中的属性,然后转为字符串,即是对深度监听的优化



5、Watch与Computed的区别
  • watch中的函数是不需要调用的,computed内部的函数调用的时候不需要加()

  • watch(属性监听),监听的是属性的变化,而computed(计算属性),是通过计算而得来的数据

  • watch需要在数据变化时执行异步或开销较大的操作时使用,而对于任何复杂逻辑或一个数据属性,在它所依赖的属性发生变化时,也要发生变化,这种情况下,我们最好使用计算属性computed。

  • computed 属性的结果会被缓存,且computed中的函数必须用return返回最终的结果

  • watch 一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;

6、Watch与Computed的使用场景
  • computed    

    • 当一个结果受多个属性影响的时候就需要用到computed

    • 最典型的例子: 购物车商品结算的时候

  • watch

    • 当一个数据的变化需要有额外操作的时候就需要用watch

    • 搜索数据

  • 总结:

    • 一个值的结果受其他值的影响,用computed

    • 一个值的变化将时刻影响其他值,用watch

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/1020561.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号