vue生命週期簡記

寫在前面

如題,vue的生命週期是vue理解的重要一環,弄明白它不僅會加深對vue的理解,在實際開發中也會更加駕輕就熟,在此記錄寫項目開發中體會到的一些經驗,只是總結 並不全面,想要詳細學習網上關於vue生命週期學習的文章很豐富vue

<!--more-->app

lifecycle.png

生命週期

  • beforeCreate:建立前,new操做,已綁定事件,尚未數據,不能處理數據
  • created:建立,能夠處理數據
  • beforeMounted:掛載前,準備把建立的掛載到el上,有el纔去執行掛載
    掛載前的el還是<div id="app"></div>
  • 有template轉化後執行render funcion再去渲染
    cli中的.vue文件中的template是經過vue-loader直接轉化直接執行render funcion的減小耗時
  • mounted:掛載,掛載後$el就是渲染後的<div>123</div>,掛載先後中間執行render funcion
  • beforeUpdated:更新前,數據變化
  • updated:更新
  • beforeDestroy:銷燬前,組件被銷燬,或手動銷燬
  • destroy:銷燬

注:
掛載前的鉤子裏獲取不到el的,想對如data中的數據進行操做最先要在created裏;
通常在createdmounted鉤子裏寫一些頁面渲染前的操做,好比數據請求;
有些傳統的第三方庫在使用後須要在組件銷燬時手動刪除其建立的對象在destroy學習

<!--more-->spa

沒有代碼
最後附上一張之前看到的一張圖
生命週期表.png對象