Vue.js中Computed和Watch的区别

一、基本区别

1. computed计算属性：依赖其他的值，有缓存，当它依赖的属性值发生改变，在下次获取computed的值时，才会重新计算computed值。
2. watch监听器：更多的是起到监听的作用，它没有缓存，每当监听的数据发生了变化都会执行回调进行后续的操作。

二、主要区别

Computed：

1. 支持缓存，当依赖的数据发生变化后，才会重新计算。
2. 不支持异步操作，当它里面有异步操作时，无法监听数据的变化。
3. 计算属性的值，默认会缓存，它是基于响应式依赖进行缓存的，就是基于data声明过或者从父组件传递过来的props中的数据进行计算。
4. 如果一个属性是由其他属性计算而来的，那么一般就会使用计算属性。
5. 如果计算属性的属性值是函数，那么默认会使用get方法，函数的返回值就是属性的属性值。在计算属性中，有get和set方法，当数据发生变化时，会调用set方法。

Watch：

1. 不支持缓存，当数据发生变化时，他就会触发，之后进行对应的操作。
2. 它支持异步监听。
3. 监听的函数会接收两个参数，第一个参数是新值，第二个参数是旧值。
4. 当一个属性发生变化时，就会执行对应的操作。
5. 监听数据必须在data中声明或者是从父组件传递过来的props中的数据，当发生变化时，会触发对应的操作，函数有两个参数：
   immediate：组件加载会直接触发回调函数。
   deep：深度监听，发现数据内部的变化，在复杂数据类型中使用。

三、直观对比：

1. 功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2. 是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3. 是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4. computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true(immediate:true)
5. 使用场景：computed-----当一个属性受到多个属性影响的时候，使用computed。watch----当一条数据影响多条数据的时候，使用watch。
6. computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应的操作。
7. computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作。
8. computed属性的属性值是函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器。

四、应用场景：

当需要进行计算并依赖其他数据的时候，就使用计算属性，因为可以利用计算属性的缓存特性，避免每次获取值的时候都要重新计算，而当它需要执行异步操作时，使用watch。

五、总结：

在computed和watch方面，一个是计算，一个是观察，在语义上是有区别的。
计算是通过变量计算得出的数据，而观察是观察一个特定的值，根据被观察者的变动进行相应的变化，在特定的场景下不能相互混用，所以还是需要注意api运用的合理性和语义性。