vue中計(jì)算屬性很常見,熟悉vuex的應(yīng)該都知道getter也就是store倉(cāng)庫(kù)狀態(tài)的state計(jì)算處理,但是改變state的方法只能是提交mutation,那么回到
computed這個(gè)屬性,同樣的,如果我們只是用到這個(gè)計(jì)算的值,而不對(duì)其做任何處理,那么完全可以這么寫(因?yàn)閏omputed默認(rèn)是getters狀態(tài)):
如圖所示,如果我們需要對(duì)計(jì)算的值的處理時(shí),對(duì)其直接賦值就會(huì)報(bào)錯(cuò),這個(gè)時(shí)候就需要用到computed另外一個(gè)屬性setter了,當(dāng)然這倆者是相互獨(dú)立的,
互不干涉,測(cè)試代碼很簡(jiǎn)單,只需要分別派發(fā)setter與getter然后在updated中測(cè)試一下就好,貼一個(gè)結(jié)合.sync的demo吧(.sync就是一個(gè)props與事件廣播的語(yǔ)法糖,不贅述了)
這是dom結(jié)構(gòu),vue實(shí)例化掛載的是app這個(gè)id;
然后是一個(gè)全局的組件,(全局組件必須在vue實(shí)例化之前定義),然后是使用組件的結(jié)構(gòu)(這里不是單文件組件)
當(dāng)更改computed中的值時(shí),需要使用到set屬性,因?yàn)閱蜗虻臄?shù)據(jù)流,所以必須將值廣播出去,value即是監(jiān)聽計(jì)算值變化的回調(diào)返回值,
注意的這個(gè)計(jì)算值本身仍是無(wú)法改變,但是因?yàn)閺V播之后父組件的值變了,這時(shí)候在get中能看到值的變化,在set中仍然是沒(méi)有變化的,結(jié)果只需要console打印下即可,不再贅述了。
