一、理解計算屬性的概念，計算屬性的英文是computed，其實很多時候，一些概念從英文對照為中文后，會導致其中一些含義發(fā)生錯位與丟失，我們要想更好的理解computed計算屬性，可以將這個概念分為兩部分來看：

　　- 計算 ：這里的計算，是有種宏觀的概念，指的是對于數(shù)據(jù)包的一種操作，比如:篩選、過濾、新增、刪除等。 說明computed本身是具有處理數(shù)據(jù)的能力。

　　- 屬性：屬性的意思是，一種可以讀取、渲染的數(shù)據(jù)，性質跟data的作用相似，說明computed最終會給出一個數(shù)據(jù)供頁面渲染使用。 由此，我們可以得出一個結論: computed計算屬性，負責將一些數(shù)據(jù)在其內(nèi)部按照指定邏輯處理后，最終給出處理后的結果數(shù)據(jù)，給到組件、頁面進行渲染使用，可以讓開發(fā)者更加便捷的處理一些動態(tài)變化的數(shù)據(jù)需求。

　　二、computed計算屬性的特點

　　1. computed內(nèi)部對data做出處理，其處理結果可以像data一樣，可以直接在頁面中渲染。

　　2. computed內(nèi)部邏輯會自動識別到data的變化，從而做出新的操作，得出新的數(shù)據(jù)，從而自動更新視圖。

　　3. computed處理的數(shù)據(jù)具有緩存的能力，如果data不變，則頁面中調(diào)用的都是computed第一次執(zhí)行時的運算結果，提高渲染性能。

　　三、computed應用場景 當某個前端已經(jīng)指定的data數(shù)據(jù)包，如果我們渲染前，對其有過濾、篩選等操作需求，就可以使用computed

　　1. 字符串翻轉的官方案例，就是將一個普通字符串翻轉后再渲染到視圖。new Vue({ el:'#app',

　　//占地盤 data:{ 'msg':'Hello Vue' //自定義數(shù)據(jù)包 }, computed:{ reMsg(){ //專門用于反轉msg的計算屬性 return this.msg.split('').reverse().join('') } } })

　　2. 如果一個班級中有很多學生，每個學生通過一個對象來表達，現(xiàn)在我們需要根據(jù)學員成績來進行動態(tài)切換顯示：全部學員、及格學員、不及格學員，這種在本地進行篩選的需求可以快速通過computed實現(xiàn)，代碼邏輯大致如下:

　　new Vue({ el:'#app', //占地盤 data:{ stu:[ {name:'張三豐',score:100}, {name:'DDK',score:50}, {name:'張翠山',score:60}, {name:'張無忌',score:90}, {name:'PDD',score:45} ], status:0 //0全部 1及格 2不及格 }, computed:{ filterStu(){ let {stu,status} = this // let stu = this.stu // let status = this.status switch (status) {

　　case 1: //及格 return stu.filter(item=>{ return item.score>=60 })

　　case 2: //不及格 let arr = stu.filter(item=>{ return item.score