先分析下生命周期
beforecreated:el 和 data 並未初始化
created:完成了 data 數據的初始化,el沒有
beforeMount:完成了 el 和 data 初始化
mounted :完成掛載
(1)mounted
很多人跟我說初始化放在Mounted里面, 我問她(他)們為什么?她(他)們回答說因為這個時候DOM初始化渲染好啦。然后我繼續問DOM初始化渲染和請求初始化數據有什么關系?他們會說可以顯示請求出來的數據啦。(大家覺得有沖突嗎?)
DOM初始化渲染和請求初始化數據並沒有什么沖突
讓我們在看看前面的Vue生命周期
a、beforeCreate:
(在實例初始化之后,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。---官方貼的)
b、beforeMount:
(在掛載開始之前被調用:相關的 render 函數首次被調用。---官方貼的)
看了這個2個我們繼續分析:
我們請求回來的初始化數據或者基礎數據是不是需要掛在Vue的Data上面?(是的,需要√) 然后我們繼續beforeCreate的時候Data有沒有生成?(答案是:沒有。×) --所以這一步是無法把數據掛到Vue的Data上面的 然后我繼續看created的時候Data有沒有生成?(答案是:生成啦。√) --所以這一步我們是可以把數據掛到Vue的Data上面的,是不是可以放在這里啦? --是的,可以放在這里啦。所以最后結論就是放在created里面。
補充分析:
(1)mounted
如果把所有請求放在created里面的話,請求過多會,加載太慢會導致頁面出現短暫的白屏情況,一般上我寫的話,接口不復雜會放created里面,接口多復雜的話會放在mounted里面.
(2)mounted
created 是加載DOM,html之后 就馬上執行, 比如初始化,獲取屏幕高度調整,賦值等等,而mounted就是執行包括js之后,准備開始調用方法,也就是說 類似傳統開發那樣,先加載jquery 再調用插件
.