watch 和 computed 区别

1.侦听属性 watch

①.不支持缓存，数据变化，直接会触发相应的操作;
②.watch 支持异步操作;
③.watch有两个参数;

 immediate：组件加载立即触发回调函数执行;
 deep：深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变;

④.watch中的函数名称必须要和data中的属性名一致，watch依赖于data中的属性，属性发生变化的时候，watch中的函数就会发生变化;
⑤.watch不支持缓存;
⑥.需要再data中声明;

---

2.计算属性 computed

①.支持缓存，computed是依赖data中的属性，data中属性发生改变的时候，会重新进行计算，没有改变的时候，当前函数不会执行;
②.不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化;
③.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的;
④.computed中的函数必须用return返回;
⑤.如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个 set 方法，当数据变化时，调用 set 方法;
⑥.不需要再data中声明;

需要注意的是，computed属性是基于依赖的数据进行缓存的，只有在依赖数据发生变化时，computed才会重新计算。这意味着多个computed属性依赖于同一个数据时，只有在该数据变化时它们才会被更新。这种缓存机制可以提高性能，避免不必要的计算

---

3.使用场景

①.watch的使用场景：一个数据影响多个数据,需要在数据变化时执行异步操作或者开销较大的操作时使用。
例如：搜索数据

②.computed：一个数据受多个数据影响，处理复杂的逻辑或多个属性影响一个属性的变化时使用。
例如：购物车商品结算的时候

---

4.总结

computed 计算属性适合根据 data 里的属性，来做一些简单的计算并返回结果，例如数组的排序、筛选等等，它的结果会缓存起来，只有 data 中的属性发生变化时才会重新计算，其它情况会直接返回计算结果，以提高效率。计算属性可以像 data 属性一样直接在 html 模板中使用。
watch 适合在 javascript 中监听 data 属性的变化，并根据变化做一些耗时的操作或者发送远程 API 请求。watch 中的方法一般没有返回值，而是直接修改 data 中的属性。