watch监听表单的某个值_Vue computed(计算属性)与watch(侦听器)

computed(计算属性)

为了解决在模板中放入太多的逻辑会让模板过重且难以维护,vue开发了computed(计算属性)。计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

ex:

<

结果:

b41d748410e7cc04943d709ab4617ee1.png

reversedMessage使用了两次,但是却只输出了一次“reversedMessage”。调用了两次getReversedMessage()方法,输出了两次“getReversedMessage”。

调用两次方法,做了两次计算。计算属性只做了一次计算后就将数据做了缓存,之后访问不再从新计算,直接从换从中获取,只有当message值改变时才会重新计算。

所以当需要进行复杂逻辑计算且依赖于其它数据多次复用时,使用计算属性可以大大减少开销。

watch(侦听器)

虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。

<

computed(计算属性)与watch(侦听器)的区别:

computed(计算属性):依赖其它属性值,并且 computed 的值有缓存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才会重新计算 computed 的值。

watch(侦听器):更多的是「观察」的作用,无缓存性,类似于某些数据的监听回调,每当监听的数据变化时都会执行回调进行后续操作。

使用场景:

需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。这些都是计算属性无法做到的。

当我们需要进行数值计算,并且依赖于其它数据时,应该使用 computed,因为可以利用 computed 的缓存特性,避免每次获取值时,都要重新计算。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值