Vue 初始化獲取數據應該放到 Created 還是 Mounted 中?

Vue 初始化獲取數據應該放到 Created 還是 Mounted 中?

以下片段摘自官方文檔
created:

在實例創建完成後被立即同步調用。在這一步中,實例已完成對選項的處理,意味着以下內容已被配置完畢:數據偵聽、計算屬性、方法、事件/偵聽器的回調函數。然而,掛載階段還沒開始,且 $el property 目前尚不可用。
mounted:

實例被掛載後調用,這時 el 被新創建的 vm.$el 替換了。如果根實例掛載到了一個文檔內的元素上,當 mounted 被調用時 vm.$el 也在文檔內。

注意 mounted 不會保證所有的子組件也都被掛載完成。如果你希望等到整個視圖都渲染完畢再執行某些操作,可以在 mounted 內部使用 vm.$nextTick。
分析

按理來說,用created和mounted獲取後端初始化數據能達到的效果是一致的,只不過使用mounted時,顯示的數據有可能是頁面渲染完成後,頁面的響應式效果將數據顯示在頁面中;而created是獲取到數據再渲染到頁面中。所以將數據初始化放到created中的話,邏輯上是比較合適的。

但並不是說,這是一種絕對的操作,數據初始化就一定要寫死在created中。比如說你需要用到dom操作:使用echarts時,如果你將數據獲取放在了created的話,它會有出現無數據的情況(有時候確實又有數據),那時由於在用echarts鉤子的時候,需要用ref獲取dom元素,在dom初始化之前調用ref是無法獲取到的。在使用echarts的時候,獲取數據是需要寫到mounted中的。

還有一種情況就是,created中放了很多同步代碼或者一個需要執行很長很長時間的數據獲取代碼的話,會出現打開頁面白屏很長的時間(什麼都不顯示),這對用戶體驗來說,是十分不友好的,用戶可能會認爲你的服務器爛到爆炸。所以當有初始化數據執行時間長的同步方法,是推薦放到mounted中的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章