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

Posted 2021-01-21

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

https://cn.vuejs.org/v2/guide/computed.html#%E4%BE%A6%E5%90%AC%E5%99%A8

引用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实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。

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