vue 计算属性和data_vue之结合methods和watch理解计算属性computed

1. 从methods的角度理解

我们可以在模板内使用表达式进行简单的计算：

 Reversed message: "{{ message + 'OPQ'}}"

但是对于相对复杂一点的逻辑，我们一般会调用方法处理然后再返回结果:

 Reversed message: "{{revMessage()}}"

运算结果

methods很好的处理了这些相对复杂的逻辑计算，但是methods有两个特性：methods是交互方法，需要主动去触发

methods每次计算后都会把变量回收，再次访问的时候会重新计算。

如果想缓存计算结果，这个时候就可以用到computed了：

 Reversed message: "{{revMessage}}"

运算结果

为了更理解computed的特性，我们通过调试台改变message的值：

调试结果

我们可以看到，在改变message的值之前，使用methods和computed得到的结果是一样，而当我们去改变message的值以后会自动触发revMessage，对字符串进行翻转。

通过上面的例子，应该能大概理解computed相对于methods的一些特性了，下面我还是进行一下总结：methods是交互方法需要主动去触发，而computed则是在检测到data数据变化时自动触发的。

methods是一次性无缓存的计算，computed则是有缓存的。methods每次计算后都会把变量回收，再次访问的时候会重新计算。而computed则是依赖数据的，数据占用内存是不会被回收掉的，再次访问的时候不会重新计算，而是返回上次计算的值，当依赖的数据发生改变时才会再次计算。

2. 从watch的角度理解

理解了methods和computed两者的区别以后，熟悉AngularJS或者Avalon.js的人可能会发现，其实computed和watch迷之相似，都是在关注一个数据，并在数据发生变化的时候做出反应。没错，很相像，但是vue认为大部分时候使用计算属性，会比使用watch监听更优，我们看看下面两个的例子：//watch的例子

message: {{all}}

//computed的例子

message: {{all}}

这两段代码都是在做同一件事，监听message1和message2，在任何一个数据有变化的时候触发回调，更新两者合并的值。但是可以看到，使用watch的话需要分开两次去监听，然后再分开两边执行回调，相比之下使用computed简练的多了。

当然，不是所有情况下使用computed都会更优，可以看看官网的解释：#watch侦听器#

作者：四小七

链接：https://www.jianshu.com/p/2243fd51d79a