computed 選項定義計算屬性計算屬性 類似於 methods 選項中定義的函式計算屬性 會進行快取，只在相關響應式依賴發生改變時它們才會重新求值。函式 每次都會執行函式體進行計算。計算屬性（雙向繫結）計算屬性預設只有 getter ，不過在需要時你也可以提供一個 setter監聽器 watch當屬性資料發生變化時,對應屬性的回撥函式會自動呼叫, 在函式內部進行計算透過 watch 選項 或者 vm 例項的 $watch() 來監聽指定的屬性需求： 透過 watch 選項 監聽數學分數， 當數學更新後回撥函式中重新計算總分sumScore3透過 vm.$watch() 選項 監聽英語分數， 當英語更新後回撥函式中重新計算總分sumScore3
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
數學: <input type="text" v-model="mathScore">
英語: <input type="text" v-model="englishScore"><br/>
總分(函式): <input type="text" v-model="sumScore()"><br/>
總分（計算屬性-單向繫結）: <input type="text" v-model="sumScore1"><br/>
總分（計算屬性-雙向繫結）: <input type="text" v-model="sumScore2">
總分（監聽器）: <input type="text" v-model="sumScore3">
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
/*
1、函式沒有快取，每次都會被呼叫
2、計算屬性有快取，只有當計算屬性體內的屬性值改變後才會被呼叫，不然不會被呼叫
3、函式只支援單向
4、計算屬性預設情況只有getter函式，而沒有setter函式，所以只支援單向
如果需要進行雙向，則需要自定義setter屬性
*/
var vm = new Vue({
el: '#app',
data: {
mathScore: 80,
englishScore: 90,
sumScore3: 0
},
methods: {
sumScore: function(){
console.log("sumScore被呼叫")
// this 指向的就是vm例項,-0是為了字串轉為數字運算
return (this.mathScore - 0) + (this.englishScore - 0)
}
},
computed: {
sumScore1: function(){
// 計算屬性有快取，如果計算屬性體內的屬性值沒有發生變化，則不會重新計算，只有發生變化的時候才會重新計算
console.log('計算屬性被呼叫')
return (this.mathScore - 0) + (this.englishScore - 0)
},
sumScore2: {
get: function(){
console.log('計算屬性get被呼叫');
return (this.mathScore - 0) + (this.englishScore - 0)
},
set: function(value){
console.log('計算屬性set被呼叫');
var avg = value / 2
this.mathScore = avg
this.englishScore = avg
}
}
},
watch:{
mathScore: function(newValue,oldValue){
console.log('watch監聽器監聽數學分數變化')
this.sumScore3 = (newValue - 0) + (this.englishScore - 0)
}
}
})
vm.$watch('englishScore',function(newValue){ this.sumScore3 = (newValue - 0) + (this.mathScore - 0) }) </script></body></html>
git原始碼：https://github.com/caiyuanzi-song/vue-demo.git