vue：computed和watch的区别

1、区别

computed：

• 支持缓存：计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过的属性或者props中的属性进行计算，得到的结果会缓存起来，下一次调用直接取缓存。如果相关的响应式依赖发生变化，计算属性只会重新计算一次。

• 不支持异步监听

• 计算属性有set、get方法，如果计算属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值。

watch：

• 不支持缓存

• 支持异步监听

• 监听的函数接收两个参数，第一个是最新的值，第二个是变化之前的值。监听的属性可以是data中声明过的属性或者props中的属性或者是计算属性，当数据变化时执行异步或开销较大的操作。

• watch的完整写法还有两个选项：

deep：深度监听，监听引用数据内部的变化，不论其被嵌套多深。

immediate：组件加载时就立即执行一次监听的回调。

⚠️不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined。

2、总结

（1）computed 计算属性 : 依赖响应式属性，支持缓存，不支持异步监听。

（2）watch 侦听器 : 更多的是观察的作用，不支持缓存，支持异步监听。

computed能完成的，watch都能完成；watch能完成的，computed未必能完成。

3、运用场景

• 当需要进行数值计算，并且依赖于其它数据时，可以使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

使用场景：当一个值受多个属性影响的时候----比如：购物车商品结算

• 当想要执行异步或开销较大的操作以响应不断的变化时，可以使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

使用场景：当一条数据的更改影响到多条数据的时候----搜索框