Vue - 方法,计算属性和Watch监听的区别

Vue 中方法,计算属性和Watch监听的区别

方法

  • 方法函数时没有缓存的;
  • 每次调用时,都会重新执行该函数,可以有返回值也可以没有返回值;

计算属性

  • 计算属性是有缓存的,只要相关依赖没有改变,多次访问计算属性得到的值是之前缓存得到的计算结果,不会多次执行;
  • 我们为什么需要缓存?
  • 假设我们有一个性能开销比较大的计算属性 A,它需要遍历一个巨大的数组并做大量的计算,然后我们可能有其他的计算属性依赖于 A。如果没有缓存,我们将不可避免的多次执行 A 的 getter;
  • 总而言之:对于任何复杂的计算逻辑都应使用计算属性进行处理并返回

Watch监听

  • 当需要在数据变化时执行异步或开销较大的操作时,使用watch监听是最有用的;
  • 使用 watch 监听允许我们执行异步操作 (访问一个 API),限制我们执行该操作的频率,并在我们得 到最终结果前,设置中间状态。这些都是计算属性无法做到的;
  • 设置{immediate: true }属性 将立即以表达式的当前值触发回调;
  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页
评论

打赏作者

C_心欲无痕

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值