Computed 和 Watch 的区别

1.computed计算属性：

作用：
（1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。

（2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。

（3）不支持异步，如果有异步操作，无法监听数据的变化。

（4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。

（5）computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data声明过，或者父组件传递过来的props中的数据进行计算的。

2.watch侦听器：

作用：
（1）它不支持缓存，数据变化时，它就会触发相应的操作。

（2）支持异步监听。

（3）接受两个参数，第一个是最新的值，第二个是变化之前的值。

（4）监听data或者props传来的数据，发生变化时会触发相应操作。有两个参数：

immediate：立即触发回调函数。

deep：深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。

3.总结：

computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作

computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作

computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器

4.computed与watch的使用场景：

computed：是多对一，多个数据影响一个。当需要进行数值计算,并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时都要重新计算。

watch：是一对多，一个数据发生变化，执行相应操作会影响多个数据。当需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许执行异步操作 ( 访问一个 API )，限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

computed与watch的区别：

1.computed表示的是计算属性，watch指的是监听属性，监听的值变化时执行回调函数

2.computed会使用缓存，而watch不使用缓存，每次监听都执行回调

3.computed需要return，而watch不一定要return

4.computed从一开始就进行监听，而watch则不监听第一次加载，如果要watch监听第一次加载，需要配置immediate：true

5.使用场景：computed适用于一个数据受多个数据影响时，watch适用于多个数据受一个数据影响时。