Vue中 watch 和 computed 区别和使用场景

在 vue 的项目中，经常用到 watch 和 computed 这两个属性。两个都是数值改变触发改变的属性，他们之间有什么区别？

1、区别

Computed：

1. computed： 是计算属性，依赖其它属性值；
2. computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的值时才会从新计算 computed 的值；
3. 不支持异步，当 Computed 中有异步操作时，无法监听数据的变化
4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他的属性，一般会使用 computed；
5. 如果 computed 属性的属性值是函数，那么默认使用 get 方法，函数的返回值就是属性的属性值；在 computed 中，属性有一个 get 方法和一个 set 方法，当数据发生变化时，会调用 set 方法。

Watch：

1. watch：更多的是「观察」的做用，用于监听data中的数据变化，只在被监听的属性值发生变化时执行；
2. watch不支持缓存，当一个属性发生变化时，它就会触发相应的操作；
3. watch支持异步监听
4. watch监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
5. watch监听数据必须是 data 中声明的或者父组件传递过来的 props 中的数据，当发生变化时，会触发其他操作
6. watch函数有两个的参数： 

                 immediate：组件加载立即触发回调函数

                deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。

      特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,2)-----修改arr中第0项开始的1个数据为2，this.$set(this.arr,0,2)-----修改arr第0项值为2

2、使用场景

Computed：

1. 当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；
2. computed擅长处理的场景：一个数据受多个数据影响，如购物车计算价格

Watch：

1. 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用watch选项允许我们执行异步操作。这些都是计算属性无法做到的。
2. watch擅长处理的场景：一个数据影响多个数据，如搜索数据