Vue学习笔记（3）关于Vue的计算属性

通过之前的学习，我们学习了模板之中的文本插值，这可以很好的实现数据的展示与绑定，但是这样的展示是有点缺陷的，比如当你想把数据做一定的复杂处理过后才展示的时候，当然你也可以继续地使用模板，可是这会显得特别难以维护。

Vue当然也是给出了解决方案，这就是计算属性，先给出代码

{{message}}
{{reverseMessage}}

在此我们利用了计算属性来对message做一个整理转换，然后再展示于页面之中，这样在网页的编写之中就显得十分的清晰了。

步骤如下，在dom中使用文本插值，然后在Vue实例中添加computed选项，并为此添加reverseMessage的函数返回值，我们为其提供的函数作为reverseMessage的getter，Vue中的开发文档中对于getter的说明是干净无副作用的，我们可以放心地使用它。

当然上面的代码还有另外一种实现方式，就是利用method来实现

{{message}}
{{reverseMessage()}}

代码如上，我们可以利用文本插值之中加入一个method来实现数据的处理

但是这两种方式是不一样的，method方法在每一次重新渲染都会重新计算一次，而使用计算属性的方法会对数据进行绑定，储存在缓存之中，除非数据发生变动。如果你不希望有缓存，你可以使用method。

接下来还要介绍一个监视属性 Watched property

他可以监视数据的变动

The message is :
{{theReact}}

如代码所示，利用watch选项中的函数，我们可以实现对数据的监视，当其发生改变的时候就会调用相应的方法。这可以运用在一些异步访问之中。

到此，对于计算属性以及method，watch等应该有了一定的了解了。