一、什么是計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用于簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。例如：
<div id="example"> {{ message.split('').reverse().join('') }}</div>這里的表達式包含3個操作，并不是很清晰，所以遇到復雜邏輯時應該使用Vue特帶的計算屬性computed來進行處理。
二、計算屬性的用法
在一個計算屬性里可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就可以。
我們把上面的例子用計算屬性的方式重寫一下
<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p> //我們把復雜處理放在了計算屬性里面了</div>var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { reversedMessage: function () { // `this` 指向 vm 實例 return this.message.split('').reverse().join('') } }});結果：
Original message: "Hello"
Computed reversed message: "olleH"
除了上例簡單的用法，計算屬性還可以依賴多個Vue 實例的數據，只要其中任一數據變化，計算屬性就會重新執行，視圖也會更新。
<body> <div id="app"> <button @click="add()">補充貨物1</button> <div>總價為：{{price}}</div> </div></body>var app = new Vue({ el: '#app', data: { package1: { count: 5, price: 5 }, package2: { count: 10, price: 10 } }, computed: { price: function(){ return this.package1.count*this.package1.price+this.package2.count*this.package2.price //總價隨著貨物或價格的改變會重新計算 } }, methods: { //對象的方法 add: function(){ this.package1.count++ } }});計算屬性還有兩個很實用的小技巧容易被忽略：一是計算屬性可以依賴其他計算屬性; 二是計算屬性不僅可以依賴當前Vue 實例的數據，還可以依賴其他實例的數據，例如：
<div id="app1"></div> <div id="app2">{{ reverseText}}</div>var app1 = new Vue({ el: '#app1', data: { text: 'computed' }});var app2 = new Vue({ el: '#app2', computed: { reverseText: function(){ return app1.text.split('').reverse().join(''); //使用app1的數據進行計算 } }});每一個計算屬性都包含一個getter 和一個setter ，我們上面的兩個示例都是計算屬性的默認用法， 只是利用了getter 來讀取。
在你需要時，也可以提供一個setter 函數， 當手動修改計算屬性的值就像修改一個普通數據那樣時，就會觸發setter 函數，執行一些自定義的操作，例如：
新聞熱點
疑難解答
圖片精選
