小白也能懂的VUE的生命週期探尋

Vue生命週期

做爲vue的核心之一，生命週期無論是文檔仍是面試都是高頻知識點今天咱們從什麼是生命週期，生命週期的內容，如何利用生命週期出發，作一些探究

生命週期的理解

• 官方：Vue 實例從建立到銷燬的過程，就是生命週期。也就是從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、卸載等一系列過程，咱們稱這是 Vue 的生命週期

• 通俗的說：當加載一個頁面的時候，會建立一個vue實例來展現這個頁面，

  第一階段

  • 最早開始的 是建立，也就是 「beforeCreate」 ，這個階段，實例初步被建立，尚未初始化，就是一個具有基本模板，沒有任何數據和事件的光桿司令，

  • 而後進入到「created」階段，這時候實例建立完成，而且馬上調用這個鉤子裏的函數，這時候數據觀測 (data observer)，watch/event 事件回調 的屬性和方法配置完成，頁面元素還沒初始化，

  • 接下來準備開始掛載dom節點，以供操做，在掛載以前 「beforeMount」 階段，這時候相關的render函數首次被調用，而且完成頁面元素和數據的初始化，

  • 而後「mounted」階段，這時候屬性有了，方法有了，頁面元素有了，數據也有了，因此這個階段會對DOM節點進行操做，進行掛載完畢，而且掛載完畢後調用鉤子裏的函數，因此大多數的函數放在這裏面，由於這裏了開始能夠對dom進行操做

  第二階段

  • 第一階段數據渲染完畢，頁面展示完畢，這時候想要進行數據交互，這時的第一階段是 「beforeUpdate」 ，它發生在數據更新的調用時候，DOM尚未從新渲染以前，這時候能夠進一步更改狀態，並且不會觸發從新渲染的過程
  • 「updated」 階段，這個階段DOM以及從新渲染，能夠行使操做新dom的的行爲，可是應該避免出現這種行爲，極可能會致使更新無線循環
  • 「beforeDestroy」 階段，上一階段的行爲最好放在這裏使用這是實例銷燬以前的最後完整保留
  • 「destroyed this.$destroy()」 ，這個階段實例被銷燬，實例相關的一切消失，

  小結： 生命週期鉤子的一些使用方法： 「beforecreate」 : 能夠在這加個「loading」事件，在加載實例時觸發 「created」 : 「初始化」完成時的事件寫在這裏，如在這「結束loading」事件，異步請求也適宜在這裏調用 「mounted」 : 掛載元素，獲取到「DOM」節點 「updated」 : 若是對「數據統一處理」，在這裏寫上相應函數 「beforeDestroy」 : 能夠作一個「確認中止事件的確認框」

  經典生命週期圖

  img

這張圖有不理解的能夠查上面的白話，還有不理解的能夠留言，看到了會盡力回答， 後期會更新源碼配合理解