Nuxt asyncData與fetch的不同

首先是關於this的使用,fetch 中的 this 指的就是component本身,asyncData 的this則是undefined。且fetch可以被component本身用 this.$fetch() 再次呼叫,而asyncData不行。

再來是顯示的效果。server-side render時感覺不出來,不過在client side render時,就有明顯差異。兩者分別運作的流程如下:

使用 asyncData 會經過的流程

點擊連結 -> asyncData() -> 組件建立完成 -> render畫面(換頁)

使用 fetch 會經過的流程

點擊連結 -> 組件建立完成 -> render畫面(換頁) -> fetch()

使用asyncData的話,會先取資料,取完資料才換頁。使用fetch的話,取資料前就會先換頁,等到資料取完後,才會填入資料。

意思就是當你使用fetch的時候,會比較像你在用App或modern web site時會看到loading那樣的體驗。也就必須要處理當資料還沒載入前,要顯示的替代內容,例如loading bar。

想要全部資料都載入完成後才換頁,就用asyncData。

但請注意,當想要使用 keep-alive 來快取頁面資料(*回上一頁,資料不重取的效果)就必須使用fetch,因為asyncData每次都會執行。

發佈留言

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

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