简述Vue computed 和 watch 的区别和运用的场景？

Vue面试题 5月前 0 124

computed 和 watch 都是 Vue 中的重要特性，它们都用于观察和响应 Vue 实例上的数据变动。但是它们的使用场景和方式有所不同：

computed（计算属性）：
- 计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时才会重新求值。这意味着只要依赖没有改变，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。
- 计算属性适合用在模板渲染中，某个值是依赖其他的响应式对象甚至多个计算属性计算而来；当这些依赖发生变化时，计算属性会重新计算新的值。这使得我们在处理复杂逻辑时，能够将复杂逻辑拆分在各个计算属性中，使得代码更清晰易读。
watch（侦听器）：
- 侦听器允许我们对数据进行异步操作，每当监听的数据变化时，都会执行回调进行后续操作。
- 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。例如，当一些数据改变需要向服务器发送请求，或者在数据改变后需要进行一些延时的复杂逻辑，这些场景下，使用 watch 是非常有用的。

总的来说，当你需要在数据变化后执行异步或开销较大的操作时，使用 watch；当你需要根据其他数据变动实时计算或处理一些数据时，使用 computed。