首先是關於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的話,取資料前就會先換頁,等到資料取完後,才會填入資料。
閱讀全文 Nuxt asyncData與fetch的不同