十一、vue生命周期詮釋--帶圖


Vue 實例有一個完整的生命周期,也就是從開始創建、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程,我們稱這是 Vue 的生命周期。通俗說就是 Vue 實例從創建到銷毀的過程,就是生命周期。

  1. beforecreate : 
    完成實例初始化,初始化非響應式變量
    this指向創建的實例;
    可以在這加個loading事件;
    data computed watch methods上的方法和數據均不能訪問
  2. created
    實例創建完成
    完成數據(data props computed)的初始化 導入依賴項。
    可訪問data computed watch methods上的方法和數據
    未掛載DOM,不能訪問$el,$ref為空數組
    可在這結束loading,還做一些初始化,實現函數自執行,
    可以對data數據進行操作,可進行一些請求,請求不易過多,避免白屏時間太長。
    若在此階段進行的 DOM 操作一定要放在 Vue.nextTick() 的回調函數中
  3. berofeMount
    有了el,編譯了template|/outerHTML
    能找到對應的template,並編譯成render函數
  4. mounted
    完成創建vm.$el,和雙向綁定,
    完成掛載DOM 和渲染;可在mounted鈎子對掛載的dom進行操作
    即有了DOM 且完成了雙向綁定 可訪問DOM節點,$ref
    可在這發起后端請求,拿回數據,配合路由鈎子做一些事情;
    可對DOM 進行操作
  5. beforeUpdate
    數據更新之前
    可在更新前訪問現有的DOM,如手動移除添加的事件監聽器;
  6. updated :
    完成虛擬DOM的重新渲染和打補丁;
    組件DOM 已完成更新;
    可執行依賴的dom 操作
    注意:不要在此函數中操作數據,會陷入死循環的。
  7. activated:
    在使用vue-router時有時需要使用<keep-alive></keep-alive>來緩存組件狀態,這個時候created鈎子就不會被重復調用了,
    如果我們的子組件需要在每次加載的時候進行某些操作,可以使用activated鈎子觸發
  8. deactivated 
    for keep-alive 組件被移除時使用
  9. beforeDestroy: 
    在執行app.$destroy()之前
    可做一些刪除提示,如:你確認刪除XX嗎? 
    可用於銷毀定時器,解綁全局時間 銷毀插件對象
  10. destroyed :

    當前組件已被刪除,銷毀監聽事件 組件 事件 子實例也被銷毀 這時組件已經沒有了,你無法操作里面的任何東西了。 

子父組件的生命周期

  • 僅當子組件完成掛載后,父組件才會掛載
  • 當子組件完成掛載后,父組件會主動執行一次beforeUpdate/updated鈎子函數(僅首次)
  • 父子組件在data變化中是分別監控的,但是在更新props中的數據是關聯的(可實踐)
  • 銷毀父組件時,先將子組件銷毀后才會銷毀父組件
  • 兄弟組件的初始化(mounted之前)分開進行,掛載是從上到下依次進行
  • 當沒有數據關聯時,兄弟組件之間的更新和銷毀是互不關聯的
  • mixin中的生命周期與引入該組件的生命周期是僅僅關聯的,且mixin的生命周期優先執行


免責聲明!

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



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