低仿vue-async-computed
vue中computed屬性值的計算函數只能是同步的,於是有了vue-async-computed 這個插件。其實我覺得這個插件非常有用,相比較之下這個項目的star就比較少了。
處於練習的目的(我不想三十歲就上天台),我試著實現這個這個插件的功能。有這麼幾個問題需要解決:
1。如何獲取開發者定義的asyncComputed?
使用$options屬性。之前我試著實現vuex的時候就用過它
2。如何實現監聽功能?
使用$watch
3。非同步的決議值該如何處理?
每一個asyncComputed都會在vm上對應一個值,每當promise決議手動賦值
4。依賴這個asyncComputed屬性的地方如何獲得更新
我會調用$forceUpdate方法,如果是一個computed屬性依賴他,需要把這個computed屬性設為cache:false
於是我徹底跑偏了。。。。。。雖然對於我目前遇到的場景這麼做確實是實現了功能。
看了一下原作者的實現。他的做法是重載了data參數,每一個asyncComputed屬性都有對應的一個data,然後利用$watch監聽變化為對應的參數賦值。這樣每一個asyncComputed都具有推送自身變化的功能(其他的watch可以監聽它的變化了)。
有一點不太理解的是每一個asyncComputed都會對應一個computed屬性,然後監聽這個computed屬性,然而事實上並不需要這個獨立的computed屬性,$watch的第一個參數可以是一個function啊。。
推薦閱讀:
※我的CSS學習之旅
※小爝的知乎Live-如何監控性能 & 分析數據
※如何將喜歡的響應式網站變成APP – manifest icon製作教程無標題文章
※web前端:如何(安全地)使用Vue.js的jQuery插件
※Typescript玩轉設計模式 之 對象行為型模式(上)
TAG:前端開發 |