参考:https://www.cnblogs.com/wuqilang/p/11241604.html
![bdaf5f3c892f5c2193dfb233b799c4bf.png](https://i-blog.csdnimg.cn/blog_migrate/e0e98408fccc1a90a714aaa20df4bba8.jpeg)
computed:通过属性计算而得来的属性
1、computed内部的函数在调用时不加()。
![c6818930a754fa349f2f082385b6a5f3.png](https://i-blog.csdnimg.cn/blog_migrate/329d4406e016528b9b631fb118aece26.jpeg)
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中的函数就会执行。
![6fb628b098de19189539a9b51c8282e1.png](https://i-blog.csdnimg.cn/blog_migrate/01e2b6cb5abdd589997ea0443ae3986d.jpeg)
2、watch中的函数有两个参数,前者是newVal,后者是oldVal。
3、watch中的函数是不需要调用的。
4、watch只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变。也就是说,watch想要监听引用类型数据的变化,需要进行深度监听。"obj.name"(){}------如果obj的属性太多,这种方法的效率很低,obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。
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 页面首次加载的时候做一次监听。
使用场景:当一条数据的更改影响到多条数据的时候---------搜索框