前言

计算属性、methods和watch是vue.js的三个重要的属性。如果简单的使用计算属性和methods，其实仔细琢磨，还是有很大的区别的。

计算属性和 methods的区别？

对于Computed:

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

对于Watch:

它不支持缓存，数据变化时，它就会触发相应的操作
支持异步监听
监听的函数接收两个参数，第一个参数是最新的值，第二个是变化之前的值
当一个属性发生变化时，就需要执行相应的操作
监听数据必须是data中声明的或者父组件传递过来的props中的数据，当发生变化时，会触发其他操作，函数有两个的参数:

immediate: 组件加载立即触发回调函数
deep:深度监听，发现数据内部的变化，在复杂数据类型中使用，例如数组中的对象发生变化。需要注意的是，deep无法监听到数组和对象内部的变化。当想要执行异步或者昂贵的操作以响应不断的变化时，就需要使用watch.

总结:

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

运用场景:

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

Computed 和 Methods 的区别

可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的
不同点:
computed：是属性调用，而methods是函数调用，使用的时候需要加括号，
computed: 计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会重新求值
computed：带有缓存功能，而methods不会被缓存。
methods：不会被缓存：方法每次都会去重新计算结果