vue 中 watch 、computed、 watchEffect 区别

2023-12-16 12:01:48

computed

接受一个 getter 函数,返回一个只读的响应式 ref 对象。该 ref 通过 .value 暴露 getter 函数的返回值。它也可以接受一个带有 get 和 set 函数的对象来创建一个可写的 ref 对象。

  • 在 getter 函数中,在追踪的响应式依赖没有发生变化时,返回都会是上次缓存的数据。(计算属性和方法的区别)
  • 只有在computed中的响应式依赖发生变化时,才会再次进行运算。
  • computed必须有个返回值

watch/watchEffect?

1、watch是惰性执行的,也就是只有所监听的数据发生变化时才会执行(可以设置属性 immediate :true立即执行);但是watchEffect不同,每次带马甲在都会执行;

2、watch需要传递监听对象,watchEffect不需要

3、watch只能监听响应式数据:例如ref定义的属性,reactive定义的对象,如果直接监听reactive定义的对象中的属性是不被允许的,除非使用函数转换一下;watchEffect如果监听reactive定义的对象是不起作用的,只能监听对象中的属性

其watch和computed的区别如下:

1、computed支持缓存,只有依赖数据发生改变,才会重新进行计算;而watch不支持缓存,数据变,直接会触发相应的操作。

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

3、computed属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值;而watch监听的函数接收两个参数,第一个参数是最新的值,第二个参数是输入之前的值。

4、如果一个属性是由其它属性计算而来的,这个属性依赖其它属性,是一个多对一或者一对一,一般用computed;而当一个属性发生变化时,需要执行对应的操作;一对多一般用watch。

文章来源:https://blog.csdn.net/qianqianNingmeng/article/details/134879732
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。