computed計(jì)算屬性
1.什么是計(jì)算屬性？
1.在 script的computed中燕耿，可以定義一些屬性中符，即計(jì)算屬性,計(jì)算屬性是基于它們的響應(yīng)式【依賴進(jìn)行緩存】的意思就是 (計(jì)算屬性依賴的值發(fā)生變化時(shí)，就會(huì)立即重新計(jì)算誉帅，如果依賴的值不發(fā)生變化淀散，計(jì)算屬性會(huì)使用之前緩存的值)
2.計(jì)算屬性的求值結(jié)果會(huì)被緩存起來(lái)，方便下次直接使用
3.計(jì)算屬性方法內(nèi)部無(wú)論如何都要return出去一個(gè)值蚜锨。
計(jì)算屬性多用于對(duì)多個(gè)變量或者對(duì)象進(jìn)行處理后返回一個(gè)結(jié)果值档插，也就是多個(gè)變量中的某一個(gè)值發(fā)生了變化，則我們監(jiān)控的這個(gè)值也就會(huì)發(fā)生變化,比如淘寶購(gòu)物車計(jì)算總價(jià)
應(yīng)用場(chǎng)景：對(duì)于任何復(fù)雜邏輯的屬性計(jì)算亚再，皆可使用（比如淘寶購(gòu)物車總價(jià)計(jì)算郭膛，在計(jì)算屬性中封裝一個(gè)可以計(jì)算總價(jià)的函數(shù)，需要時(shí)調(diào)用氛悬，避免重復(fù)寫一樣的函數(shù)则剃，占用內(nèi)存）
優(yōu)點(diǎn)：可重復(fù)調(diào)用
缺點(diǎn)：不支持異步
緩存：支持緩存耘柱，只有依賴數(shù)據(jù)發(fā)生改變，才會(huì)重新進(jìn)行計(jì)算?
比如說我們可以利用計(jì)算屬性對(duì)一個(gè)字符串進(jìn)行反轉(zhuǎn)
div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
//我們把復(fù)雜處理放在了計(jì)算屬性里面了
</div>
var vm = new Vue({ el: '#example',
data: { message: 'Hello' },
computed: { reversedMessage: function ()
{ // `this` 指向 vm 實(shí)例
return this.message.split('').reverse().join('') } } });
結(jié)果為：Original message: "Hello"Computed reversed message: "olleH"?
計(jì)算屬性的復(fù)雜使用
現(xiàn)在有一個(gè)數(shù)組數(shù)據(jù)books棍现，里面包含許多book對(duì)象调煎，數(shù)據(jù)結(jié)構(gòu)如下：
要求計(jì)算出所有book的總價(jià)格totalPrice。
獲取每一個(gè)book對(duì)象的price累加己肮，當(dāng)其中一個(gè)book的價(jià)格發(fā)生改變時(shí)候士袄，總價(jià)會(huì)隨之變化。
computed 和watch的區(qū)別
? ? ? 相同? - 兩者都能達(dá)到根據(jù)data中數(shù)據(jù)變化谎僻，就觸發(fā)函數(shù)的結(jié)果娄柳。
? ? ?- 計(jì)算屬性是基于他們的依賴進(jìn)行緩存的， 多用于處理多個(gè)變量返回一個(gè)值
? ? watch多用于異步處理或者邏輯比較復(fù)雜的處理艘绍。比如實(shí)時(shí)搜索效果
