Vue中computed VS watch 区别 及computed VS method区别

computed VS watch

先来看官网中对计算属性（computed）的解释：

模板内的表达式很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。

详情见官网URL

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7

官网中对侦听器（watch）的解释：

虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

详情见官网URL

引用vue官网的例子，以下：

 

 

 

 

用computed写

 

 

 

 

用watch写

 

 

 

 

两种方法实现的效果是相同的，可是computed写法更为简单。

Computed

在页面中使用大量或是复杂的表达式去处理数据，对页面的维护会有很大的影响。这个时候就须要用到computed 计算属性来处理复杂的逻辑运算。

computed 计算属性只有在相关的数据发生变化时才会改变要计算的属性，当相关数据没有变化是，它会读取缓存。

【注】计算属性默认不能直接进行修改。

watch模式没有computed模式简单，但watch比较适合作异步的操做。

以下的例子，用watch能够实现2s后更改数据。而这种效果用computed不能实现，由于computed不适合作异步操做。

 

 

 

 

computed VS methods

官网中的对计算属性（computed）缓存和方法(methods)的解释：

咱们能够将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是彻底相同的。然而，不一样的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会从新求值。

详情见官网URL

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%BC%93%E5%AD%98-vs-%E6%96%B9%E6%B3%95

以下示例：

 

 

 

 

 

 

 

 

这二种方式返回的结果是同样的，写但在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法同样去用，必须加()。

两种方式在缓存上也大有不一样，利用computed计算属性是将 reverseMessage与message绑定，只有当message发生变化时才会触发reverseMessage，而methods方式是每次进入页面都要执行该方法，可是在利用实时信息时，好比显示当前进入页面的时间，必须用methods方式。

总结：computed是在HTML DOM加载后立刻执行的，如赋值；

methods则必需要有必定的触发条件才能执行，如点击事件；

watch用于观察Vue实例上的数据变更。对应一个对象，键是观察表达式，值是对应回调。

感谢阅读，此分享如有错误请回复指正。