Vue中什么是計(jì)算屬性computed,計(jì)算屬性的基礎(chǔ)择吊、計(jì)算屬性computed與方法method實(shí)現(xiàn)相同的功能為什么選擇計(jì)算屬性。
在官方文檔中為我們引出一個(gè)這個(gè)的例子:
在html標(biāo)簽元素中使用插值表達(dá)式能夠使數(shù)據(jù)的處理變得更加的靈活槽奕,且是便利的几睛,但是設(shè)計(jì)它們的初衷是用于簡(jiǎn)單運(yùn)算的。在模板中放入太多的邏輯會(huì)讓模板過重且難以維護(hù)粤攒。
現(xiàn)在我們寫出跟官網(wǎng)相同的例子這個(gè)例子是將data數(shù)據(jù)中msg中的字符串翻轉(zhuǎn):
會(huì)發(fā)現(xiàn)在HTML的模板語(yǔ)法中發(fā)現(xiàn)插值表達(dá)式的內(nèi)容過于冗長(zhǎng)所森,當(dāng)如果需要處理的數(shù)據(jù)量多,處理過程復(fù)雜的邏輯運(yùn)算琼讽,這樣就會(huì)使的插值表達(dá)式中的代碼量增多必峰,給之前的字符后面增加一個(gè)大寫的字符串就會(huì)發(fā)現(xiàn)我們的模板語(yǔ)言已經(jīng)變得十分的厚重。
如果我們之后的模板語(yǔ)言再次需要這個(gè)邏輯并且擴(kuò)展就會(huì)加重模板語(yǔ)言的負(fù)擔(dān)钻蹬,我需要計(jì)算上面的字符串的長(zhǎng)度是多少吼蚁,代碼如下:
我們應(yīng)該需要知道Vue ,是一個(gè)構(gòu)建數(shù)據(jù)驅(qū)動(dòng)的 web 界面的漸進(jìn)式框架
這樣的觀點(diǎn)使我們應(yīng)該將重心放在用在數(shù)據(jù)的處理问欠,而不是在模板語(yǔ)言肝匆。由此我們引入計(jì)算屬性,以上的代碼可以改寫為:
這樣我們就把上面的插值表達(dá)式中的代碼給汲取出來(lái)顺献,這樣我們的好處可以簡(jiǎn)化我們模板語(yǔ)言代碼旗国,并且我們生成了一個(gè)計(jì)算屬性,這個(gè)屬性可以在當(dāng)前的Vue實(shí)例中通過this訪問注整,并且代碼清晰能曾。
這個(gè)時(shí)候就會(huì)有人提出那我可以在插值表達(dá)式里面用方法來(lái)表示也是一樣的效果
這樣跟上面的計(jì)算屬性的效果不是一樣的么度硝?為什么還要多次一舉呢,在官網(wǎng)中有這樣解釋:我們可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性寿冕。兩種方式的最終結(jié)果確實(shí)是完全相同的蕊程。然而,不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的驼唱。只在相關(guān)響應(yīng)式依賴發(fā)生改變時(shí)它們才會(huì)重新求值藻茂。
計(jì)算屬性是基于它們的響應(yīng)式依賴進(jìn)行緩存的
當(dāng)我們重新渲染模板的時(shí)候如果你的計(jì)算屬性中的響應(yīng)式依賴沒有改變計(jì)算屬性會(huì)立刻返回之前的值,而不用去執(zhí)行函數(shù)玫恳,這樣就提高了我們的渲染你的效率辨赐,什么是響應(yīng)式依賴,在上面的例子中可以認(rèn)為是msg以及pre京办、還有生成的newString對(duì)于newStringLength也是響應(yīng)式依賴
我們?yōu)槭裁葱枰彺嫦菩颍考僭O(shè)我們有一個(gè)性能開銷比較大的計(jì)算屬性?A,它需要遍歷一個(gè)巨大的數(shù)組并做大量的計(jì)算臂港。然后我們可能有其他的計(jì)算屬性依賴于?A?森枪。如果沒有緩存,我們將不可避免的多次執(zhí)行?A?的 getter审孽!如果你不希望有緩存县袱,請(qǐng)用方法來(lái)替代。