vue中computed和watch的区别，以及适用场景，
computed：通过属性计算而得来的属性
1、computed内部的函数在调用时不加()。 例子：
computed:{ reverseStr(){ //str不发生变化的话，我只执行一次，具有缓存 return this.str.split("").reverse().join("") } }2、computed是依赖vm中data的属性变化而变化的，也就是说，当data中的属性发生改变的时候，当前函数才会执行，data中的属性没有改变的时候，当前函数不会执行。
3、computed中的函数必须用return返回。（上面例子）
4、在computed中不要对data中的属性进行赋值操作。如果对data中的属性进行赋值操作了，就是data中的属性发生改变，从而触发computed中的函数，形成死循环了。
5、当computed中的函数所依赖的属性没有发生改变，那么调用当前函数的时候会从缓存中读取。
使用场景：当一个值受多个属性影响的时候------------购物车商品结算
watch：属性监听
1、watch中函数名称必须要和data中的属性名一致，因为watch是依赖data中的属性，当data中的属性发生变化的时候，watch中的函数就会发生变化。
2、watch接收两个参数（newValue,oldValue）
3、watch中的函数不需要调用。
4、watch只会监听数据的值是否发生改变，而不会去监听数据的地址是否发生改变。也就是说，watch想要监听引用类型数据的变化，需要进行深度监听。"queryData.name"(){}------如果queryData的属性太多，这种方法的效率很低，queryData:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
watch: {
'queryData.name': {
handler: function(newValue,oldValue)//里面的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个 属性，比如name，这个时候可以这样
deep: true
}
}
//深监听，必须写，否则监听无效
deep: true,
immediate: true
//可选 是否变量首次赋值时，就进行交监听，
//默认是改变时（也就是复制完毕后第一次更改）才执行监听方法内容
}
5、特殊情况下，watch无法监听到数组的变化，特殊情况就是说更改数组中的数据时，数组已经更改，但是视图没有更新。更改数组必须要用splice()或者$set。this.arr.splice(0,1,100)-----修改arr中第0项开始的1个数据为100，this.$set(this.arr,0,100)-----修改arr第0项值为100。
6、immediate:true 页面首次加载的时候做一次监听。
使用场景：当一条数据的更改影响到多条数据的时候---------搜索框
两者区别：
1、功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3、是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候，使用watch-------搜索框。
