Computed 和 Watch 的区别

Computed

• 支持缓存，计算的结果不管调用多少次，都是从缓存中取，只有依赖的数据发生了变化，才会从新计算。
• 不支持异步，当 Computed 中有异步操作时，无法监听数据的变化。
• Computed 的值会默认走缓存，计算属性是基于它们的响应依赖进行缓存的，也就是data声明过，或者父组件传递过来的props中的数据进行计算的。
• 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，一般会使用Computed。
• 如果computed属性的属性值是函数，那么默认使用get方法，函数的返回值就是属性的属性值；在computed中，属性有一个get方法和一个set方法，当数据发生变化时，会调用set方法。但是，set方法需要手动去写。

Watch

• 它不支持缓存，他侦听的数据发生变化时，他就会触发相应的操作；
• 支持异步监听；
• 监听到的函数必须是data中声明过，或者父组件传递过来的props中的数据，当被侦听的数据发生变化后，会触发其他操作，函数有两个的参数：
  • immediate：组件加载立即触发回调函数
  • deep：为true时，开启深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象变化。

建议

• 出于性能考虑，能用计算属性 Computed 就别用侦听器 Watch ，因为侦听器默认不会缓存，虽然侦听器可以实现和计算属性一样的功能，但是，每次取值不管依赖的数据有没有变化，都会从新计算，对性能存在浪费。
• 如果是要执行异步 或者某数据的变化时要执行对应的代码时，就需要使用 Watch；

总结

• Computed 计算属性：依赖其它属性值，且 Computed 的值有缓存，只有它依赖的属性值发生改变，下一次获取 Computed 的值时，才会重新计算 Computed 的值。
• watch 侦听器 ：更多的是起到侦查的作用，没有缓存性，类似于某些数据的监听回调，每当监听的数据变化时，都会执行回调进行后续操作。

运用场景

• 当需要进行数值计算，并且依赖于其它数据时，应使用 Computed ，因为可以利用 Computed 的缓存特性，避免每次获取值时都要重新计算。
• 当需要执行异步 或者某数据的变化时要执行对应的代码时，应使用 watch ，使用 watch 选项允许执行异步操作（访问一个 API），限制执行该操作的频率，并在得到最终结果前，设置中间状态。这些都是计算属性无法做到的。