computed和watch的使用场景和区别

使用场景

watch和computed各自处理的数据关系场景不同

1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响

区别

```javascript
1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。

2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。

3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。

4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。
5、写法：watch监听的变量名必须在data中定义，有两个参数，前者是newVal，后者是oldVal，computed监听的是变量不能在data中定义，可以直接调用；
6、watch可以深度监听对象和数组

computed

computed:{
    fullName: function () { return  this.firstName + lastName }
}

1、computed内部的函数在调用时不加()。

2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。

3、computed中的函数必须用return返回。

4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。

5、当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。

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

watch：属性监听

方式一：
watch: {
   firstName: function (val) {  this.fullName = val + this.lastName }
}

方式二：
watch: {
    tableData: {
      handler(val) {
        if (this.activeName === 'calculat') {
          this.calculatList = []
          this.calculatList = objDeepCopy(val)
        }
      },
      immediate: true,  //确定是否以当前初始值执行handler函数（页面首次加载的时候做一次监听）
      deep: true //深度监听
    }
  },

1、watch中的函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生改变的时候，watch中的函数就会执行。

2、watch中的函数有两个参数，前者是newVal，后者是oldVal。

3、watch中的函数是不需要调用的。

4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。“obj.name”(){}------如果obj的属性太多，这种方法的效率很低，obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

5、特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者s
e t 。 t h i s . a r r . s p l i c e ( 0 , 1 , 100 ) − − − − − 修 改 a r
r 中 第 0 项 开 始 的 1 个 数 据 为 100 ， t h i s .
set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.set。this.arr.splice(0,1,100)−−−−−修改arr中第0项开始的1个数据为100，this.set(this.arr,0,100)-----修改arr第0项值为100。

6、immediate:true 页面首次加载的时候做一次监听。