computed 有何特点,computed 和 watch,methods 的区别

Vue中的计算属性computed利用缓存提升性能,仅在依赖变更时重新计算,适合处理派生数据。methods每次都会执行函数。watch用于监听数据变化并执行异步操作,适合多个数据影响一个结果或限制操作频率的场景。理解它们的区别有助于优化Vue应用的性能和逻辑组织。
摘要由CSDN通过智能技术生成
  • computed: 有缓存,data 不变不会重新计算;提高性能。
  • computed 为什么需要缓存?简单说就是可以提高性能。假设我们有一个性能开销比较大的计算属性A,它需要遍历一个巨大的数组做大量的计算,然后我们可能有其他的属性依赖于A,如果没有缓存,将不可避免的多次执行A 的getter,如果不希望有缓存请用方法代替
  • computed 和 methods的区别: computed 计算属性是基于它的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值,这意味着只要原属性还没发生改变,多次访问相关属性,计算属性会立即返回之前的计算结果,而不必再次执行函数;而 methods 每当触发重新渲染时,调用方法总会再次执行函数
  • computed 和 watch的区别:computed 默认只要 getter,不过需要时也可以提供 setter;watch 侦听器,当需要在数据变化时执行异步或开销较大的操作时,watch是最有用的,使用 watch选项允许执行异步操作(访问一个API),限制我们执行该操作的频率,并在得到最终结果前,设置中间状态,这些都是计算属性无法做到的

  • computed 是属性
  1. 当需要根据已有数据产生一些派生数据的时候,可使用计算属性
  2. 注意:计算属性不支持异步操作,因为计算属性一般要绑定到模板中
  3. 更重要的一点是:计算属性会缓存调用的结果,提高性能
  4. 计算属性必须有返回值,没有返回值就没有意义
  • watch 是一个功能:
  1. watch不需要返回值,根据某个数据变化执行xx逻辑
  2. watch可以执行异步操作

  • computed 和 watch的使用场景:如果一个数据需要经过复杂计算就用 computed;如果一个数据需要被监听并且对数据做一些操作就用watch;watch擅长处理的场景:一个数据影响多个数据;computed擅长处理的场景:一个数据受多个数据影响
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值