vue——created與activated的區別


搬運自: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中。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM