問題描述:
最近開發 H5+ APP ,首頁是兩個echarts的折線圖,由於項目應用了 keep-alive ,導致這個組件在顯示的時候,有時候並不會走 mounted 函數,而且在切換到其他頁面,再切換回來的時候,這個折線圖是不顯示的
解決方案:
第一個問題是有時候進入頁面並不會調用 mounted 函數,解決方案是把數據加載放到 activated 函數中
因為 keep-alive 會緩存頁面,所以頁面在重新進入時,不會重新加載,所以不會執行 mounted 函數,但是只要是這個頁面被激活,就一定會執行 activated 方法,所以在 activated 方法中判斷數據是否已經存在,如果不存在就調用后台接口加載數據
第二個問題是頁面切換回來時,echarts有數據也不顯示,那么讓 echarts 組件在離開時刪除,頁面激活時再重新渲染 echarts 組件即可
這里只需要應用 v-if 這個屬性的特性,當值為true時渲染組件,值為false時刪除組件,而這個刪除組件的時機就是頁面離開時,也就是 deactivated ,重新渲染的時機就是頁面激活時,也就是 activated