Nuxt asyncData與fetch的不同

首先是this,fetch 的 this 指的就是component本身,asyncData 的this是undefined…

fetch可以被component本身用 this.$fetch() 再次呼叫,而asyncData不行

顯示的效果也有差。server-side render感覺不出來,不過在client side render時,就有明顯差異。使用asyncData的話,會先取資料,取完資料才換頁。使用fetch的話,取資料前就會先換頁,等到資料取完後,才會填入資料。所以使用fetch的話,體驗會比較像Facebook App在loadiing那樣,勢必要處理當頁面沒有任何東西時,要顯示的替代內容。例如替代標題或內文的灰色色條,或是loading中的icon。

簡單來說,我覺得要做得比較像app的話,應該是用fetch。如果要像一般傳統頁面的感覺,也不需要重複fetch資料的情況,用asyncData應該就可以了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料