Vue 生命週期的簡單總結(屬於掘金的第一篇文章,歡迎指正(●'◡'●))

Vue 的生命週期是指從建立-->掛載-->更新-->銷燬的過程,簡單地說,一個組件從開始建立到最後銷燬所經歷的各類狀態,就是一個組件的生命週期。首先,官方文檔對於Vue生命週期的圖解必定要仔細研究一波,請看官方圖解(雖然仍是不懂)O(∩_∩)O

Vue生命週期圖示

從圖示能夠看到,Vue的生命週期實際上分爲八個步驟,分別是 beforeCreate,created,beforeMount,Mounted,beforeUpdate,updated,beforeDestroy,destroyed。下面對每一個階段進行簡單的分析.

  • beforeCreate 階段,發生在實例初始化以後,數據觀測(data observer)和event/watcher 事件配置以前,此時沒法獲取data中的數據和methods中的方法
  • created 階段,在實例已經建立完成以後被調用,這裏數據觀測,屬性和方法的運算都已經被配置,Vue實例的數據對象data有了,$el尚未。使用場景:發送請求獲取數據
  • beforeMount,在Vue實例掛載以前被調用
  • 在Mounted階段,此時Vue實例已經掛載到頁面中,能夠獲取到el中的DOM元素,進行DOM操做
  • beforeUpdate階段,數據更新時調用,發生在虛擬DOM從新渲染和打補丁以前,這時候能夠在這個階段進一步地更改狀態這不會出發附加的重渲染過程
  • updated階段,組件DOM已經更新,此時能夠執行依賴於DOM的操做
  • beforeDestory,在Vue實例銷燬以前被調用,在這一步,實例徹底可用。使用場景:實例銷燬以前,執行清理任務,好比定時器的消除等
  • destroyed,在Vue實例銷燬以後調用,調用後,Vue實例指示的全部東西都會解綁,,全部的事件監聽器會被移除,全部的子實例也會被銷燬,但DOM結構任然存在

今天又是充滿但願的一天,繼續加油( ̄▽ ̄)"

平常吸貓
相關文章
相關標籤/搜索