一、定義

在模板中,對(duì)于任何復(fù)雜邏輯，應(yīng)當(dāng)使用計(jì)算屬性

【Demo實(shí)例地址 https://jsbin.com/zehemop/2/edit?html,output 】

二、用法

1?所有計(jì)算屬性都以函數(shù)形式寫在 Vue 實(shí)例內(nèi)的 computed 選項(xiàng)內(nèi)，返回計(jì)算后的結(jié)果

2?可以依賴多個(gè)Vue實(shí)例數(shù)據(jù)，只要其中任一個(gè)數(shù)據(jù)變化，計(jì)算屬性會(huì)重新執(zhí)行，視圖也更新

【Demo實(shí)例地址 https://jsbin.com/hajucur/edit?html,console,output 】

三、setter|getter

計(jì)算屬性默認(rèn)只有 getter ，不過在需要時(shí)可以提供一個(gè) setter

當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)，就會(huì)觸發(fā) setter函數(shù)，執(zhí)行一些自定義的操作

【Demo實(shí)例地址 https://jsbin.com/qoduboh/1/edit?html,output 】

四、計(jì)算屬性緩存

調(diào)用 methods 里的方法與計(jì)算屬性起到同樣的作用

頁面中的方法： 如果是調(diào)用方法，只要頁面重新渲染。方法就會(huì)重新執(zhí)行，不需要渲染，則不需要重新執(zhí)行 計(jì)算屬性：不管是否渲染，只要計(jì)算屬性依賴的數(shù)據(jù)未發(fā)生變化，就永遠(yuǎn)不變

當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)，應(yīng)當(dāng)使用計(jì)算屬性，除非你不希望得到緩存