computed【计算属性】watch【监听】methods【方法】的区别

简介: computed【计算属性】watch【监听】methods【方法】的区别

computed【计算属性】

  • 当一个数据受多个数据的影响或者某个值需要通过某个逻辑或者由多个数据计算而来就可以使用到计算属性
  • 支持缓存,当以来的数据发生改变的时候,会进行重新计算,否则就会从缓存中进行取值(读取数据)
  • 不支持异步:当computed中有异步操作的时候是无效的,无法监听到数据的变化
  • 使用的时候与data中的数据使用方式是一样的
  • 当computed属性值是函数,那么默认使用get,返回值就是属性的属性值;当数据发生改变的时候,使用set方法
  • 使用场景:购物车金额计算

watch【监听属性】

  • 当一个数据变化影响一个或者或者多个数据的时候就会需要一个监听者
  • 不支持缓存,监听的数据发生变化就会触发相应的监听回调
  • 支持异步,监听的数据必须是data中定义过的数据或者说是通过props传递过来的数据
  • 它有两个重要的属性:一个是immediate 另一个是deep
  • immediate是组件加载立即触发,如果是true,组件加载立即出发,如果是false,那么组件首次加载不会执行监听逻辑
  • deep深度监听【为了监听对象内部值得变化,适用于复杂数据类型得数据中】

methods【方法】

无缓存,每次访问重新执行,消耗性能比较高

相关文章
|
6月前
|
缓存 JavaScript 数据处理
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
在Vue中,什么时候使用computed属性,什么时候使用watch监听属性?
77 0
|
16天前
|
JavaScript
computed 计算属性和 watch 监听函数的执行顺序
【10月更文挑战第23天】理解`computed`计算属性和`watch`监听函数的执行顺序是 Vue.js 开发中的一个重要知识点,它有助于我们更好地处理数据的变化和响应,确保应用的正常运行和性能优化。
|
1月前
|
缓存 监控 JavaScript
computed 属性和 watch 方法的性能比较
【10月更文挑战第3天】
23 4
|
1月前
|
缓存 JavaScript
|
28天前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
92 0
|
4月前
|
缓存 JavaScript
计算属性(computed)和侦听器(watch)
计算属性(computed)和侦听器(watch)
52 0
|
6月前
|
缓存 JavaScript
computed/watch深度监听
computed/watch深度监听
194 1
|
6月前
|
缓存 JavaScript 前端开发
Vue的计算属性和侦听器:computed和watch的使用
【4月更文挑战第24天】Vue.js框架中的计算属性和侦听器是处理数据变化的关键特性。计算属性(computed)基于依赖缓存,仅在相关数据改变时重新计算,适合处理复杂逻辑。例如,计算总价可基于价格和数量动态更新。而侦听器(watch)在数据变化时执行回调,适用于异步操作和开销大的任务。计算属性与侦听器的主要区别在于缓存机制和应用场景,前者用于同步计算,后者用于响应数据变化后的特殊操作。理解这两者有助于优化Vue应用的性能。
|
6月前
|
JavaScript
Vue中的methods、computed计算属性和watch监听属性的使用和区别
Vue中的methods、computed计算属性和watch监听属性的使用和区别
|
6月前
|
缓存 监控 JavaScript
methods、computed、watch它们的差异与区别
在Vue中,Methods、Watch和Computed是三种用于处理数据和响应数据变化的不同方式。
113 0