computed计算属性和data_computed与watched选项的比较

computed计算属性和data_computed与watched选项的比较_第1张图片

computed:通过属性计算而得来的属性

1.支持缓存,只有依赖数据发生改变,才会重新进行计算;computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过的数据通过计算得到的。

2.不支持异步,当computed内有异步操作时无效,无法监听数据的变化。

3.computed中的属性都有一个get和一个set方法,如果computed属性属性值是函数,那么默认会走get方法,函数的返回值就是属性的属性值;当数据变化时,调用set方法。

4.computed内部的函数在调用时不加()。

5.computed中的函数必须用return返回。

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

watch:属性监听

1.不支持缓存,数据变,直接会触发相应的操作。

2.watch支持异步

3.监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值。

4.watch中的函数是不需要调用的

5.watch中的函数不是必须要用return

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

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

8.immediate:true 页面首次加载的时候做一次监听

使用场景:

computed----当一个属性受多个属性影响的时候,使用computed-------购物车商品结算。watch----当一条数据影响多条数据的时候,使用watch-------搜索框。

computed与watched选项的比较​www.aliyun01.com
computed计算属性和data_computed与watched选项的比较_第2张图片

你可能感兴趣的:(computed计算属性和data_computed与watched选项的比较)