當前位置:編程學習大全網 - 圖片素材 - Vue——生命周期和鉤子函數的壹些理解

Vue——生命周期和鉤子函數的壹些理解

Vue生命周期簡圖

所謂生命周期鉤子函數(簡稱生命周期函數),指的是組件的創建、更新、銷毀三個階段所觸發執行的函數。根據每個階段觸發的鉤子函數,我們可以相應的做壹些操作,如獲取後端接口數據、監聽事件、執行事件、執行定時器、移除事件、清理定時器等等。

生命周期根據上面的三個階段分為:

實例化期/組件創建

“生存期”/組件更新

銷毀期/組件銷毀

beforeCreate:

在實例初始化之後,數據觀測 (data observer) 和 event/watcher 事件配置之前被調用。

created:

在實例創建完成後被立即調用。在這壹步,實例已完成以下的配置:數據觀測 (data observer),屬性和方法的運算,watch/event 事件回調。然而,掛載階段還沒開始,屬性還不可見

beforeMount:

在掛載開始之前被調用:相關的 render 函數首次被調用。屬性已經可見,但還是原來的DOM,並非是新創建的。

mouted:

掛載到實例上去之後調用該鉤子。註意:mounted 不會把所有的子組件也都壹起被掛載。

beforeUpdate:

數據更新時,虛擬 DOM 變化之前調用,這裏適合在更新之前訪問現有的 DOM,比如手動移除已添加的事件監聽器。

updated:

數據更新和虛擬 DOM 變化之後調用。

當這個鉤子被調用時,組件 DOM 已經更新,所以妳現在可以執行依賴於 DOM 的操作。然而在大多數情況下,妳應該避免在此期間更改狀態。如果要相應狀態改變,通常最好使用計算屬性或 watcher 取而代之。

beforeDestroy:

實例銷毀之前調用,在這壹步,實例仍然完全可用。壹般在這裏移除事件監聽器、定時器等,避免內存泄漏

destroyed:

Vue 實例銷毀後調用。調用後,Vue 實例指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。

  • 上一篇:張衛健版孫悟空和陳浩民版孫悟空是壹個嗎?
  • 下一篇:壹語雙關什麽意思
  • copyright 2024編程學習大全網