Vue中computed和watch的区别

Computed (计算属性)

1. 缓存与高效：computed属性是基于它们的依赖进行缓存的，也就是说，只有当依赖的数据发生变化时，才会重新计算。这使得对于多次访问但数据不变的情况，computed属性能够提供高效的性能表现。

2. 声明式：computed属性更偏向于声明式编程，要你只需定义如何根据其他数据计算出新值，而不需要关心何时计算。这使得模板和逻辑更加清晰。

3. 不支持异步：计算属性不支持异步操作，因为它是基于当前依赖值的快照进行计算的，所以无法监听到异步操作中的数据变化。

4. 应用场景：当你需要一个值是由其他数据经过计算生成的，并且这个值会频繁被读取，但不经常改变时，应该使用computed。例如，计算总价、格式化日期等。

Watch (监听器)

1. 实时反应：watch是实时的，只要被观察的数据发生变化，就会立即执行相应的函数。它不进行缓存，每次数据变化都会触发执行。

2. 支持异步：watch函数可以包含异步操作，如调用API、延迟操作等，这使得它非常适合执行一些副作用或复杂的业务逻辑。

3. 立即执行与深度监听：watch提供immediate选项，可以在初次绑定时立即执行回调函数；deep选项允许对对象或数组进行深度监听，以便于监测深层属性的变化。

4. 应用场景：当需要在数据变化时执行一些特定操作，比如发起网络请求、改变DOM状态、执行动画等，或者需要对复杂逻辑进行处理时，使用watch更为合适。

总结

• 性能：对于需要频繁计算且结果不易改变的数据，computed由于其缓存机制而更优；而对于需要在数据变化时执行特定操作的场景，即使操作较重，watch是更好的选择。
• 逻辑复杂度：简单的计算逻辑和衍生状态更适合用computed，而涉及复杂业务逻辑、异步操作或需要执行副作用时，使用watch。
• 代码风格：computed倾向于声明式编程，使代码更易于理解和维护；watch则提供了更多的灵活性，适用于处理更复杂的逻辑。