data屬性不是響應(yīng)式的,所以不能寫成
data:{counter:0, result:this.counter>5?Greate 5 : Small5 },而應(yīng)該寫成
然后在html調(diào)用:
現(xiàn)在在增加按鈕和secondCounter時:
那么這個result()方法會在每次更新頁面的時候都執(zhí)行一次,Vue會在每次需要更新的時候更新一次頁面,比如則個secondCounder的狀態(tài)改變的時候,就需要更新頁面,Vue不知道result()函數(shù)是否執(zhí)行了,也不知道result()函數(shù)是否用到改變了的屬性,所以Vue不知道secondCounter的變化是否會影響result()函數(shù),所以它也重復(fù)執(zhí)行了result()函數(shù)
在這種情況下,可以用一個新的全局Vue對象上的屬性,Computed(計算屬性)
成都創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊從業(yè)經(jīng)驗10年,關(guān)注不同地域、不同群體,并針對不同對象提供差異化的產(chǎn)品和服務(wù);打造開放共贏平臺,與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為歷下企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、成都網(wǎng)站設(shè)計,歷下網(wǎng)站改版等技術(shù)服務(wù)。擁有十多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
點擊increase時,output和result都被執(zhí)行了,因為我改變了counter的屬性值,然后輸出了computed里的依賴,counter的output屬性,依賴counter的屬性就被刷新了。即result()函數(shù)被執(zhí)行了。
當(dāng)我點擊increaseSecond,它只會增加secondCounter的值,
computed的output沒有用到這個屬性,如果我點擊increaseSecond,就只能看到綁定了的方法,computed不會被執(zhí)行,
因為Vue不會注意到其中的屬性是什么,這里只有computed的屬性,
著就是我們在點擊increaseSecond,按鈕時沒有看到Computed的原因,
這就是當(dāng)我們處理依賴性屬性時,怎么使用computed屬性的方法。
因為Vue會緩存結(jié)果,所以只在需重寫計算屬性時,才重寫計算,所以只有當(dāng)呢不需要緩存結(jié)果時,才用到result()這種函數(shù)的形式,也就是你下每次DOM更新時,都重寫計算result,因為又時候,可能情況就需要這樣。
比如,你更新的是不再調(diào)用的函數(shù)中的屬性。
總結(jié):data中定義多個屬性counter1 ,conter2, conter3 ,counter4,通過4按鈕分別改變對應(yīng)的counter值,methods中設(shè)置多個函數(shù),result1調(diào)用counter1, result2調(diào)用counter2,result3調(diào)用counter3,在computed中設(shè)置方法output,output調(diào)用counter4。然后再P標(biāo)簽中調(diào)用result1,result2,result3,output。點擊按鈕1,result1,result2,result3都會被執(zhí)行,點擊按鈕2,按鈕3也一樣,但是點擊按鈕4時,result1,result2,result3,output都會被執(zhí)行。