Stories

Detail Return Return

vue3-onMounted和onActivated觸發問題 - Stories Detail

Vue3中,當頁面第一次進入時,onMountedonActivated這兩個生命週期鈎子都會觸發,導致初始化函數init()被執行兩次,我們希望只在初次進入時執行一次,而不是兩次。

其實最簡單的方法就是僅使用onActivated生命週期

如果同時使用兩個生命週期,就要在onMounted的時候做一個標記,然後在onActivated的時候改變這個標記


<keep-alive>緩存組件中, onActivated()onDeactivated() 生命週期分別標識組件激活和失活時觸發
組件激活(進入頁面),觸發 onActivated()
組件失活(離開頁面),觸發 onDeactivated()

為什麼首次進入會同時觸發 onMountedonActivated

  1. onMounted 是組件的掛載鈎子,表示組件已插入 DOM
  2. onActivated<keep-alive>特有的鈎子,表示組件從緩存中激活。 首次加載時,組件需要先掛載(onMounted),然後被標記為激活(onActivated)。
    在使用的時候需要注意,onActivated是與<keep-alive>有強關聯關係的。

參考資料:
緩存實例的生命週期

user avatar jdcdevloper Avatar mandy_597086799bac8 Avatar
Favorites 2 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.