通過之前的學習，我們學習了模板之中的文本插值，這可以很好的實現數據的展示與綁定，但是這樣的展示是有點缺陷的，比如當你想把數據做一定的複雜處理過後才展示的時候，當然你也可以繼續地使用模板，可是這會顯得特別難以維護。
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等應該有了一定的瞭解了。
