Vue是目前前端或者后端開發經常能用到得一個快速開發框架，本章節主要給小伙伴們介紹計算屬性。
計算屬性介紹
在模板中可以直接通過插值語法顯示一些data中得數據，有些情況下我們需要對數據進行轉化或者計算后顯示，我們可以使用computed選項來計算，這時有些小伙伴可能就會問，我直接定義函數再調用不就行了，為什么還要整一個計算屬性呢？這個問題在下邊再做解釋，我們先來看一下計算屬性怎么用！
拼接名字案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src=http://m.syqk.com.cn/skin/m04blueskin/image/nopic.gif </head> <body> <div id="app"> <!-- 原始拼接方式 --> <p>{{fastName}} {{lastName}}</p> <!-- 在模板語法中進行計算 --> <p>{{fastName + " " + lastName}}</p> <!-- 調用函數計算 --> <p v-text="fullName2()"></p> <!-- 使用計算屬性計算 --> <p>{{fullName1}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { fastName: "Tracy", lastName: "McGrady" }, computed: { fullName1: function(){ return this.fastName + " " + this.lastName } }, methods: { fullName2: function(){ return this.fastName + " " + this.lastName } } })</script></html>
運行結果
這里我們發現，計算屬性得值和普通得插值語法計算出來得值是一樣得，我們抱著 【既然他們一樣，有何區別】 得疑問繼續往下看第二個案例。
購物車價格統計案例
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src=http://m.syqk.com.cn/skin/m04blueskin/image/nopic.gif </head> <body> <div id="app"> <p>{{totalPrice}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { bookes: [ {id: 100,name: 'Unix編程藝術',price: 119}, {id: 200,name: 'Java編程思想',price: 105}, {id: 300,name: '高并發編程',price: 98}, {id: 400,name: 'Spring5',price: 99}, ] }, computed: { totalPrice: function(){ let result = 0; // 普通循環 // 增強for循環，i為索引 // ES6新增for循環直接獲取對象 for(let book of this.bookes){ result += book.price } return result; } } })</script></html>
運行結果就是在瀏覽器上顯示出來商品得價格
以上兩個案例供給各位練習和體驗計算屬性得用法，他得原理是什么？怎么實現得？他和我自己定義函數調用有什么區別，我們在下邊為大家一一道來
getter和setter方法
那么首先登場得是我們得 geetter 和 setter 方法，如果您忘記或者不知道有這兩個玩意，請將你們得老師拉出去祭天。
計算屬性得完整寫法其實是其中包含了getter和setter方法，聲明一個fullName對象，因為我們一般只獲取值，所以會將其省略寫成上邊案例得方式，我們在獲取數據時會調用get方法，設置數據時會調用set方法。
給出原始得getter和setter方法，就問你周到不。
<html> <head> <meta charset="utf-8"> <title></title> <script src=http://m.syqk.com.cn/skin/m04blueskin/image/nopic.gif </head> <body> <div id="app"> <p>{{fullName}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { firstName: "Tracy", lastName: "McGrady" }, // 計算屬性 computed: { // 計算對象 fullName:{ // 設置數據 set: function(){ console.log('---'); }, // 獲取數據 get: function(){ return this.firstName + " " + this.lastName; } } } })</script></html>
計算屬性得原理知道了就是getter和setter兩個方法在這玩，我問什么要用它捏，有什么好處呢，接下來就是他得優勢，也是招聘時會問得一道面試題
計算屬性緩存
這里就來回答一下上邊得methods和computed得區別得問題，下方代碼分別使用插值語法、methods、計算屬性來做數據渲染
Talk is cheap, show me the code!
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src=http://m.syqk.com.cn/skin/m04blueskin/image/nopic.gif </head> <body> <div id="app"> <!-- 原始方式，該方式面對數據計算時比較繁瑣，不推薦使用 --> <p>名字：{{name}} 工作：{{job}}</p> <!-- methods方式，每獲取一次數據就調用一次函數 --> <p>{{getInfo1()}}</p> <p>{{getInfo1()}}</p> <p>{{getInfo1()}}</p> <p>{{getInfo1()}}</p> <!-- computed方式，當數據沒有發生變化時，僅調用一次，會將數據進行緩存 --> <p>{{getInfo2}}</p> <p>{{getInfo2}}</p> <p>{{getInfo2}}</p> <p>{{getInfo2}}</p> <p>{{getInfo2}}</p> </div> </body> <script type="text/javascript"> var app = new Vue({ el: "#app", data: { name: "麥迪", job: "NBA球星" }, methods: { getInfo1: function(){ console.log("methods"); return "名字：" + this.name + "工作：" + this.job; } }, computed: { getInfo2: function(){ console.log("computed"); return "名字：" + this.name + "工作：" + this.job; } } })</script></html>
在代碼中做了輸出，他們得計算結果必然是相同得，接下來請看圖，就能知道他們得內在區別。
1、methods和computed看起來都能實現我們得功能
2、計算屬性會進行緩存，如果多次使用時，計算屬性只會調用一次
關于計算屬性得介紹本章就到這里，他得核心就是會有緩存，多次計算僅會調用一次，您可以在項目中靈活運用啦。
