vue 中 watch 、computed、 watchEffect 区别

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。