3.1 什么是計(jì)算屬性
我們己經(jīng)可以搭建出一個(gè)簡(jiǎn)單的 Vue 應(yīng)用掌腰， 在模板中雙向綁定一些數(shù)據(jù)或表達(dá)式了。 但是表達(dá)式如果過長(zhǎng)张吉， 或邏輯更為復(fù)雜時(shí)齿梁， 就會(huì)變得雕腫甚至難以閱讀和維護(hù)
<div>
{{ text.split ( ’,’ ) ?reverse () . join (’,’)}}
</div>
這里的表達(dá)式包含 3 個(gè)操作， 并不是很清晰肮蛹， 所以在遇到復(fù)雜的邏輯時(shí)應(yīng)該使用 計(jì)算屬性
所有的計(jì)算屬性都以函數(shù)的形式寫在 Vue 實(shí)例內(nèi)的computed選項(xiàng)內(nèi)勺择， 最終返回計(jì)算后的結(jié)果。
3.2 計(jì)算屬性用法
在一個(gè)計(jì)算屬性里可以完成各種復(fù)雜的邏輯省核， 包括運(yùn)算、 函數(shù)調(diào)用等昆码， 只要最終返回一個(gè)結(jié)果就可以气忠。 除了上例簡(jiǎn)單的用法，計(jì)算屬性還可以依賴多個(gè) Vue 實(shí)例的數(shù)據(jù)赋咽， 只要其中任一數(shù)據(jù)變化旧噪， 計(jì)算屬性就會(huì)重新執(zhí)行， 視圖也會(huì)更新
實(shí)例 :展示兩個(gè)購物車的物品總價(jià)
代碼：https://gist.github.com/huahua029/4ecae467853dad727a792fa3144b754c
getter和setter
每一個(gè)計(jì)算屬性都包含－個(gè) getter 和一個(gè) setter脓匿， 我們上面的兩個(gè)示例都是計(jì)算屬性的默認(rèn)用法 淘钟， 只是利用了 getter來讀取。 在你需要時(shí)亦镶， 也可以提供一個(gè) setter 函數(shù) 日月， 當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)， 就會(huì)觸發(fā) setter函數(shù)缤骨， 執(zhí)行一些自定義的操作計(jì)算屬性除了上述簡(jiǎn)單的文本插值外爱咬， 還經(jīng)常用于動(dòng)態(tài)地設(shè)置元素的樣式名稱 class 和內(nèi)聯(lián)樣式 style,
小技巧: 計(jì)算屬性還有兩個(gè)很實(shí)用的小技巧容易被忽略：
一、是計(jì)算屬性可以依賴其他計(jì)算屬性：
二绊起、是計(jì)算屬性不僅可以依賴當(dāng)前 Vue 實(shí)例的數(shù)據(jù)精拟， 還可以依賴其他實(shí)例的數(shù)據(jù)
3.3計(jì)算屬性緩存
調(diào)用 methods 里的方法也可以與計(jì)算屬性起到同樣的作用
頁面中的方法： 如果是調(diào)用方法， 只要頁面重新渲染虱歪。 方法就會(huì)重新執(zhí)行蜂绎， 不需要渲染， 則不需要重新執(zhí)行
計(jì)算屬性： 不管渲染不渲染笋鄙， 只要計(jì)算屬性依賴的數(shù)據(jù)未發(fā)生變化师枣， 就永遠(yuǎn)不變
結(jié)論: 沒有使用計(jì)算屬性， 在 methods 里定義了一個(gè)方法實(shí)現(xiàn)了相同的效果萧落， 甚至該方法還可以接受參數(shù)践美， 使用起來更靈活洗贰。 既然使用 methods 就可以實(shí)現(xiàn)， 那么為什么還需要計(jì)算屬性呢陨倡？ 原因就是
計(jì)算屬性是基于它的依賴緩存的敛滋。 一個(gè)計(jì)算屬性所依賴的數(shù)據(jù)發(fā)生變化時(shí)， 它才會(huì)重新取值兴革， 所以text 只要不改變杂曲， 計(jì)算屬性也就不更新
何時(shí)使用: -----------使用計(jì)算屬性還是 methods 取決于你是否需要緩存庶艾， 當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)， 應(yīng)當(dāng)使用計(jì)算屬性落竹， 除非你不希望得到緩存。
