先來看一個應用場景，一個人名字由firstName以及LastName構成，我需要知道fullName，我們採用三種方式實現並進行對比。
第一種：方法
<body>
<!--掛載點 模板 示例區別-->
<div id="root">
{{fullName() + " " + age}}
</div>
<script>
var vm=new Vue({
el:"#root",//元素指向,綁定
data:{
firstName:"Dell",
lastName:"Lee",
age:15,
},
methods:{
fullName:function () {
console.log("計算了一次");
return this.firstName+" "+this.lastName;
}
},
});
</script>
</body>
頁面顯示並沒有什麼問題：
現在我們嘗試去更改age:
vm.age=18;
我們發現控制檯輸出了 “計算了一次” ，儘管這個時候fullName並沒有改變，但由於fullName定義在了methods裏面，導致了不必要的開銷。
第二種：watch
<body>
<!--掛載點 模板 示例區別-->
<div id="root">
{{fullName + " " + age}}
</div>
<script>
var vm=new Vue({
el:"#root",//元素指向,綁定
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:15,
},
watch:{
firstName: function () {
console.log("計算了一次");
this.fullName = this.firstName + " " + this.lastName;
},
lastName: function () {
console.log("計算了一次");
this.fullName = this.firstName + " " + this.lastName;
}
}
});
</script>
</body>
你會發現頁面顯示也符合預期，我們再去更改age.
vm.age=19;
並沒有發現輸出了“我計算了一次”，說明watch自帶緩存，只有相關遍歷改變時纔會被調用。
第三種：計算屬性
<body>
<!--掛載點 模板 示例區別-->
<div id="root">
{{fullName + " " + age}}
</div>
<script>
var vm=new Vue({
el:"#root",//元素指向,綁定
data:{
firstName:"Dell",
lastName:"Lee",
age:15,
},
computed:{
fullName:function () {
console.log("我計算了一次");
return this.firstName + " " + this.lastName;
}
}
});
</script>
</body>
頁面顯示同樣沒什麼問題。
我們現在去更改vm.age=19;
並沒有發現有多餘輸出，說明計算屬性同樣具有緩存機制。
對比
我們對比以上三種做法，使用方法顯示數據，會在每次頁面重繪時再執行一次，加大了開銷，而第二種與第三種進行對比，明顯第三種顯得更加簡潔，所以在三種方式都可以解決問題時，我們推薦使用計算屬性。