計(jì)算屬性通常用來干什么

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

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

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

　　二、computed計(jì)算屬性的特點(diǎn)

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

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

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

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

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

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

　　2. 如果一個(gè)班級(jí)中有很多學(xué)生，每個(gè)學(xué)生通過一個(gè)對(duì)象來表達(dá)，現(xiàn)在我們需要根據(jù)學(xué)員成績(jī)來進(jìn)行動(dòng)態(tài)切換顯示：全部學(xué)員、及格學(xué)員、不及格學(xué)員，這種在本地進(jìn)行篩選的需求可以快速通過computed實(shí)現(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