Vue computed 与 watch

在Vue.js框架中，computed和watch都是响应式系统的一部分，但它们在功能和用途上有所不同。

computed（计算属性）：

• Computed是基于它们的依赖进行缓存的，只有当依赖项发生改变时才会重新计算。
• 它们通常用于当你需要根据现有数据派生出一些状态时。
• Computed可以有getter和setter，但默认只有getter。
• Comcputed属性的更新是同步的，它们在依赖项更改时立即重新计算。
• Computed属性不能直接影响其内部的响应式状态，它们是只读的，除非你提供了一个setter。
• Computed属性不会触发回调函数，它们只是返回计算后的值。

watch（侦听器）：

• Watch允许你在数据变化时执行异步操作或复杂的逻辑。
• Watch可以监听一个或多个数据的变化，并在数据变化时执行相应的操作。
• Watch支持深度监听（deep: true），可以监听对象或数组内部属性的变化。
• Watch可以立即执行（immediate: true），在组件创建时立即执行一次回调。
• Watch可以是一次性的（once: true），在数据变化时只触发一次。
• Watch可以监听数据的初始值，也可以监听数据的变化。

相似之处：

• 两者都可以依赖于响应式数据。
• 都可以用于监测数据的变化，并作出相应的处理。

使用场景：

• 当你需要根据其他数据计算一个新的值，并且这个值会频繁地被读取时，使用computed。
• 当你需要在数据变化时执行异步操作，或者需要执行一些副作用时，使用watch。

性能考虑：

• computed属性由于其缓存机制，更适合用于性能敏感的场景，如频繁计算的值。
• watch由于每次数据变化都会执行回调，可能对性能有一定影响，适用于不需要频繁触发的场景。

总结来说，computed适用于派生状态的声明式定义，而watch适用于需要执行副作用的场景。