通过之前的学习，我们学习了模板之中的文本插值，这可以很好的实现数据的展示与绑定，但是这样的展示是有点缺陷的，比如当你想把数据做一定的复杂处理过后才展示的时候，当然你也可以继续地使用模板，可是这会显得特别难以维护。
Vue当然也是给出了解决方案，这就是计算属性，先给出代码
<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{reverseMessage}}</h2>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Hi Vue!'
},
computed:{
reverseMessage:function(){
return this.message.split(' ').reverse().join('');
}
}
})
</script>
</html>在此我们利用了计算属性来对message做一个整理转换，然后再展示于页面之中，这样在网页的编写之中就显得十分的清晰了。
步骤如下，在dom中使用文本插值，然后在Vue实例中添加computed选项，并为此添加reverseMessage的函数返回值，我们为其提供的函数作为reverseMessage的getter，Vue中的开发文档中对于getter的说明是干净无副作用的，我们可以放心地使用它。
当然上面的代码还有另外一种实现方式，就是利用method来实现
<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<h2>{{reverseMessage()}}</h2>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'Hi Vue!'
},
methods:{
reverseMessage:function(){
return this.message.split(' ').reverse().join('');
}
}
})
</script>
</html>代码如上，我们可以利用文本插值之中加入一个method来实现数据的处理
但是这两种方式是不一样的，method方法在每一次重新渲染都会重新计算一次，而使用计算属性的方法会对数据进行绑定，储存在缓存之中，除非数据发生变动。如果你不希望有缓存，你可以使用method。
接下来还要介绍一个监视属性 Watched property
他可以监视数据的变动
<html>
<head>
<title>Vue</title>
<script src="https://cdn.bootcss.com/vue/2.1.8/vue.js"></script>
</head>
<body>
<div id="app">
The message is :<input type="text" v-model="message"></input>
<p>{{theReact}}</p>
</div>
</body>
<script>
var vm=new Vue({
el:'#app',
data:{
message:'',
theReact:'',
},
watch:{
message:function(val,oldval){
this.theReact=val;
}
}
})
</script>
</html>如代码所示，利用watch选项中的函数，我们可以实现对数据的监视，当其发生改变的时候就会调用相应的方法。这可以运用在一些异步访问之中。
到此，对于计算属性以及method，watch等应该有了一定的了解了。
