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 APP开发找上海捌跃网络科技有限公司
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
如下示例：
这二种方式返回的结果是一样的，写但在法上computed计算属性的方式在用属性时不用加(),而methods方式在使用时要像方法一样去用，必须加()。
两种方式在缓存上也大有不同，利用computed计算属性是将 reverseMessage与message绑定，只有当message发生变化时才会触发reverseMessage，而methods方式是每次进入页面都要执行该方法，但是在利用实时信息时，比如显示当前进入页面的时间，必须用methods方式。
总结：computed是在HTML DOM加载后马上执行的，如赋值；
methods则必须要有一定的触发条件才能执行，如点击事件；
watch用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。
转自：http://blog.51cto.com/14071672/2320110
网友评论