25、watch 和computed区别 以及computed的缓存

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了25、watch 和computed区别 以及computed的缓存相关的知识,希望对你有一定的参考价值。

参考技术A 一、侦听属性watch:
1、不支持缓存,当数据变化时,会直接触发对应的操作。
2、watch支持异步
3、监听函数接收两个参数,第一个新值,第二个旧值。
4、当一个属性发生变化时,需要执行对应的操作,一对多;
5、监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发对应的操作.
函数有两个参数: immediate:组件加载立即触发回调函数执行;
deep:深度监听,为了发现对象内部值的变化,复杂类型的数据使用,例如数组中的对象内容的改变,注意监听数组的变化不需要这么做。
注意:deep无法监听到数组的变动和对象的新增,参考vue数组变异,只有以响应式的方式触发才会被监听到。
6、当需要在数据变化时执行异步或者开销较大的操作时,使用watch是最佳的。

二、计算属性computed:
1、支持缓存,只有依赖数据发生变化时,才会重新进行计算
2、不支持异步,当computed内有异步操作时无效,无法监听数据变化
3、computed属性值默认会走缓存,计算属性是基于他们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值。
4、如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一对一或者多对一,一般用computed。

vue的computed和watch的区别

一、总述

computed和watch都是vue框架中用于监听数据变化的属性

二、computed计算属性

  1. 如果函数所依赖的属性没有发生变化,从缓存中读取
  2. 必须有return返回
  3. 使用方法和data中的数据一样,但是类似一个执行方法

三、watch监听器

  1. watch的函数名必须和data中的数据名一致
  2. watch中的函数有俩个参数,新旧
  3. watch中的函数是不需要调用的
  4. 只会监听数据的值是否发生改变,而不会去监听数据的地址是否发生改变,要深度监听需要配合deep:true属性使用
  5. immediate:true 页面首次加载的时候做一次监听

四、区别

  1. 功能:computed是计算属性,watch是监听一个值的变化而执行对应的回调
  2. 是否调用缓存:computed函数所依赖的属性不变的时候会调用缓存;watch每次监听的值发生变化时候都会调用回调
  3. 是否调用return:computed必须有;watch可以没有
  4. 使用场景:computed当一个属性受多个属性影响的时候;例如购物车商品结算;watch当一条数据影响多条数据的时候,例如搜索框
  5. 是否支持异步:computed函数不能有异步;watch可以

以上是关于25、watch 和computed区别 以及computed的缓存的主要内容,如果未能解决你的问题,请参考以下文章

vue中computed和watch的区别,以及适用场景

computed 和 watch 区别

Watch,computed和methods的区别

watch和computed区别 及二者使用场景

Vue computed和watch

vue的computed和watch的区别