Computed (计算属性)
-
缓存与高效:
computed
属性是基于它们的依赖进行缓存的,也就是说,只有当依赖的数据发生变化时,才会重新计算。这使得对于多次访问但数据不变的情况,computed
属性能够提供高效的性能表现。 -
声明式:
computed
属性更偏向于声明式编程,要你只需定义如何根据其他数据计算出新值,而不需要关心何时计算。这使得模板和逻辑更加清晰。 -
不支持异步:计算属性不支持异步操作,因为它是基于当前依赖值的快照进行计算的,所以无法监听到异步操作中的数据变化。
-
应用场景:当你需要一个值是由其他数据经过计算生成的,并且这个值会频繁被读取,但不经常改变时,应该使用
computed
。例如,计算总价、格式化日期等。
Watch (监听器)
-
实时反应:
watch
是实时的,只要被观察的数据发生变化,就会立即执行相应的函数。它不进行缓存,每次数据变化都会触发执行。 -
支持异步:
watch
函数可以包含异步操作,如调用API、延迟操作等,这使得它非常适合执行一些副作用或复杂的业务逻辑。 -
立即执行与深度监听:
watch
提供immediate
选项,可以在初次绑定时立即执行回调函数;deep
选项允许对对象或数组进行深度监听,以便于监测深层属性的变化。 -
应用场景:当需要在数据变化时执行一些特定操作,比如发起网络请求、改变DOM状态、执行动画等,或者需要对复杂逻辑进行处理时,使用
watch
更为合适。
总结
- 性能:对于需要频繁计算且结果不易改变的数据,
computed
由于其缓存机制而更优;而对于需要在数据变化时执行特定操作的场景,即使操作较重,watch
是更好的选择。 - 逻辑复杂度:简单的计算逻辑和衍生状态更适合用
computed
,而涉及复杂业务逻辑、异步操作或需要执行副作用时,使用watch
。 - 代码风格:
computed
倾向于声明式编程,使代码更易于理解和维护;watch
则提供了更多的灵活性,适用于处理更复杂的逻辑。