搬運自:https://www.cnblogs.com/goloving/p/9256212.html
使用<keep-alive>
會將數據保留在內存中,如果要在每次進入頁面的時候獲取最新的數據,需要在activated
階段獲取數據,承擔原來created鈎子中獲取數據的任務。
被包含在 <keep-alive>
中創建的組件,會多出兩個生命周期的鈎子: activated
與 deactivated
activated:在組件被激活時調用,在組件第一次渲染時也會被調用,之后每次keep-alive激活時被調用。
deactivated:在組件被停用時調用。
注意:只有組件被 keep-alive
包裹時,這兩個生命周期才會被調用,如果作為正常組件使用,是不會被調用,以及在 2.1.0
版本之后,使用 exclude
排除之后,就算被包裹在 keep-alive
中,這兩個鈎子依然不會被調用!另外在服務端渲染時此鈎子也不會被調用的。
什么時候獲取數據?
當引入keep-alive
的時候,頁面第一次進入,鈎子的觸發順序created-> mounted-> activated,退出時觸發deactivated。當再次進入(前進或者后退)時,只觸發activated。
我們知道 keep-alive
之后頁面模板第一次初始化解析變成HTML片段后,再次進入就不在重新解析而是讀取內存中的數據,即,只有當數據變化時,才使用VirtualDOM進行diff更新。有需要的話,頁面進入的數據獲取應該在activated中也放一份。數據下載完畢手動操作DOM的部分也應該在activated中執行才會生效。
所以,有需要的話,應該activated中留一份數據獲取的代碼,或者不要created部分,直接將created中的代碼轉移到activated中。