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

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