Vue 中的計算屬性
使用計算屬性（computed）有一個好處在於它有一個緩存機制，因此它不需要每次都重新計算。當其依賴屬性的值發生變化時，這個屬性的值會自動更新，與之相關的 DOM 部分也會同步自動更新。在處理一些複雜邏輯時計算屬性是很有用的。
在 Vue 中我們可以使用模板語法 {{}} 來展示一些數據，而當在模板中放入太多的邏輯會讓模板過重且難以維護。這種情況下，Vue 給我們提供了一個特別好的解決方法，就是使用計算屬性。我們可以將一些需要計算的過程寫入到一個計算屬性中去，然後讓它動態的計算就可以了。
示例：
下面我們通過一個例子來看一下計算屬性的使用，下面是一個用於求和的小例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的屬性_俠課島(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>創建第一個Vue應用</h1>
<div id="app">
<!-- 大俠是隻喵喵 -->
<p>大俠的體重爲：{{a}}千克</p>
<p>水星仔的體重爲：{{b}}千克</p>
<p>小師妹的體重爲: {{c}} 千克</p>
<p>它們的體重之和爲:{{a + b + ｃ}}千克</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
a:10,
b:65,
c:44
}
}
})
</script>
</body>
</html>
此時我們要對數據求和，是不是需要在模板中將 a、b、c 等屬性都加起來，例如上述的 {{a + b + c}}，這樣會很不方便，且會讓模板過重且難以維護。
但是如果我們使用計算屬性，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的屬性_俠課島(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>創建第一個Vue應用</h1>
<div id="app">
<!-- 大俠是隻喵喵 -->
<p>大俠的體重爲：{{a}}千克</p>
<p>水星仔的體重爲：{{b}}千克</p>
<p>小師妹的體重爲: {{c}} 千克</p>
<p>它們的體重之和爲:{{sum}}千克</p>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
a:10,
b:65,
c:44
}
},
computed:{
// sum就是計算屬性
sum:function(){
return this.a + this.b + this.c
}
}
})
</script>
</body>
</html>
這樣在 computed 中定義一個計算屬性 sum 後，就不用在模板中進行復雜的計算了。效果圖如下所示： 
Vue中的監聽屬性
監聽屬性（watch）可以監聽一個函數或者是一個變量，通過 watch 來響應數據的變化。雖然大多數情況計算屬性都可以滿足需要，但有時還是需要使用偵聽器。當需要在數據發生變化時執行異步操作或者開銷較大的操作時，就需要自定義監聽器。
示例：
例如我們想實現一個計數器，我們可以通過 watch 來響應數據的變化：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的屬性、方法和生命週期_俠課島(9xkd.com)</title>
<script src="./src/vue.min.js"></script>
</head>
<body>
<h1>計數器的實現</h1>
<div id="app">
<p>計算器：{{num}}</p>
<button @click="num++">點我加一</button>
</div>
<script>
var app = new Vue({
el:"#app",
data() {
return{
num: 1
}
}
})
// 監聽器
app.$watch('num', function(navl, oval){
alert("計數器的值從 " + oval + "變爲" + navl);
});
</script>
</body>
</html>
watch 這個對象裏面是一個函數，函數的名稱是 data 中的屬性名稱（即num），且 watch 中的函數不需要調用。
當屬性 num 發生改變，就會觸發 watch 函數（num 所對應的函數），每個函數都會接受兩個值，一個是新值(navl)，一個是舊值(oval)。
我們來看代碼在瀏覽器中的演示效果： 
當我們點擊 點我加一 按鈕時，會彈出上圖中的彈出層，告訴我們“計數器的值從 1 變爲 2”，然後我們點擊彈出層的 “確認” 按鈕，計數器顯示會變成 2。