首頁 > web前端 > Vue.js > vue組件各生命週期的職責一覽!

vue組件各生命週期的職責一覽!

藏色散人
發布: 2022-08-10 16:56:46
轉載
1620 人瀏覽過

vue中組件的生命週期,每個生命週期做了什麼,應該在這個生命週期做什麼?

【相關推薦:vue.js影片教學

#要掌握每個生命週期何時被呼叫

  • #1.beforeCreate 在實例初始化之後,資料觀測(data observer) 之前被呼叫。

  • 2.created 實例已經建立完成之後被呼叫。在這一步,實例已完成以下的配置:資料觀測(data observer),屬性和方法的運算,watch/event 事件回呼。這裡沒有$el

  • 3.beforeMount 在掛載開始之前被呼叫:相關的 render 函式首次被呼叫。

  • 4.mounted el 被新建立的 vm.$el 替換,並掛載到實例上去之後呼叫該鉤子。

  • 5.beforeUpdate 資料更新時調用,發生在虛擬 DOM 重新渲染和打補丁之前。

  • 6.updated 由於資料變更導致的虛擬 DOM 重新渲染和打補丁,在這之後會呼叫該鉤子。

  • 7.beforeDestroy 實例銷毀之前呼叫。在這一步,實例仍然完全可用。

  • 8.destroyed Vue 實例銷毀後呼叫。呼叫後, Vue實例所指示的所有東西都會解綁定,所有的事件監聽器會被移除,所有的子實例也會被銷毀。這個鉤子在伺服器端渲染期間不被呼叫

要掌握每個生命週期內部可以做什麼事

  • 1.created 實例已經創建完成,因為它是最早觸發的原因可以進行一些數據,資源的請求。

  • 2.mounted 實例已經掛載完成,可以進行一些DOM操作

  • 3.beforeUpdate 可以在這個鉤子中進一步地更改狀態,這不會觸發附加的重渲染過程。

  • 4.updated 可以執行依賴 DOM 的操作。然而在大多數情況下,你應該避免在此期間更改狀態,因為這可能會導致更新無限循環。該鉤子在伺服器端渲染期間不被調用。

  • 5.destroyed 可以執行一些最佳化操作,清空定時器,解除綁定事件

以上是vue組件各生命週期的職責一覽!的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:csdn.net
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板