vue生命周期理解或應用

beforeCreate()

  • 實例初始化之后，但是屬性，方法， 事件還未被創建時調用
  • 應用：
    • 一般用于vue實例外的屬性，方法，事件調用

created()

  • 實例化完成后調用，此時數據、屬性、方法、watch/event事件回調已完成配置，但掛載未開始，$el屬性不可見
  • 應用：
    • 異步數據請求、數據初始化適宜在這個階段進行調用
    • 如想元素掛載完成后進行操作可以使用this.$nextTick()方法進行回調獲取

beforeMount()

  • 在掛載開始之前被調用：相關的 render 函數首次被調用。該鉤子在服務器端渲染期間不被調用。

mounted()

  • 初始數據DOM掛載渲染完成，此周期只能操作初始數據所形成的DOM，對于異步數據所掛載的DOM卻無法獲取

beforeUpdate()

  • 數據更新時調用，發生在虛擬 DOM 重新渲染和打補丁之前。你可以在這個鉤子中進一步地更改狀態，這不會觸發附加的重渲染過程。該鉤子在服務器端渲染期間不被調用。

updated()

  • 由于數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鉤子。
    當這個鉤子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴于 DOM 的操作。然而在大多數情況下，你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。
  • 應用：
    • 任何數據的更新，如果要做統一的業務邏輯處理

beforeDestroy()

  • 實例銷毀之前調用。在這一步，實例仍然完全可用。

destroyed()

  • Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
  • 應用：
    • 當有多個實例在頁面中，其中的1個或者多個實例只觸發一次后，后面所操作的數據不打算對其進行實例進行操作時，可銷毀實例

activated()

  • keep-alive 組件激活時調用。

deactivated()

  • keep-alive 組件停用時調用。
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容