計算屬性：Vue.js 模板內的表達式非常便利，但是缺點就是只能用於簡單的運算，如果模板中有太多的邏輯運算會讓模板不堪重負且難以維護。恰恰計算屬性可以處理復雜的邏輯運算，也就是說對於任何復雜邏輯你都應當使用計算屬性。
1、計算屬性基礎列子
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript" src="vue.js"></script> 7 </head> 8 <body> 9 <div id="id"> 10 <span>{{message}}</span><br> 11 <span>{{reverseMessage}}</span><br> 12 <span>{{num}}</span><br> 13 <span>{{sum}}</span> 14 </div> 15 </body> 16 <script> 17 var vm = new Vue({ 18 el: '#id', 19 data:{ 20 message:'計算屬性', 21 num:100 22 }, 23 computed:{ 24 reverseMessage: function () { 25 return this.message.split('').reverse().join('') 26 }, 27 sum:function(){ 28 return this.num + 100 29 //return this.num = this,num+100 //綁定數據num同時也更新了 30 } 31 } 32 }) 33 </script> 34 </html>
輸出結果：
2、計算屬性和Methods的比較
Methods也是實現計算屬性相同的功能
計算屬性是基於它們的依賴進行緩存的，也就是說計算屬性只有在它相關依賴發生改變時才會重新求值，只要綁定數據沒有發生改變，多次訪問計算屬性會立即返回之前的計算結果，而不必執行函數。
Methods只要發生重新渲染，methods就總會執行回調函數。相比而言如果遇到需要很大的開銷邏輯運算時，使用計算屬性比methods更有優勢。因為計算屬性具有緩存的功能，可以大大提高效率。