VUE的生命週期解析

生命鉤子意義

• 就是在描述這個 Vue 例項的過程
• 其實鉤子就是在 不同時期執行的回撥函式
• 本意就是在 Vue 中給我們提供一個寫程式碼的地方

VUE的生命週期

• beforeCreate

  • 在例項建立之前執行
  • 在程式碼執行建立 new Vue 的時候，最先執行的程式碼
  • 所以這裡什麼都拿不到
  • 因為在這裡的時候，什麼都沒有做，剛剛開始準備要進行例項化
  • 基本不用

• created

  • 例項化完成之後
  • 因為例項化已經完成了，但是還沒有開始根據自己的資料去渲染 DOM 結構
  • 這個時候能拿到所有配置項裡面的資料，拿不到 EL，DOM結構
  • 基本上每個專案都有 100%使用
  • 一半在這裡做的大部分是初始資料的請求

• beforeMount 在掛載之前執行

  • 在掛載之前做的第一件事情是什麼
    • 在掛載之前先要獲得一個原始模版

        <div id="app">
        	{{ msg }}
        </div>
  

  • 在拿到原始模版的 HTML 結構以後就執行了這個函式

  • 這個時候我們能拿到一個 this.$el 來表示這個模版

  • 很少用，因為替換之前我們拿不到準確的內容

• mounted 在掛載之後執行

  • 當我把模版中的內容替換好了以後，去執行
  • 模版已經替換好了，那麼就可以拿到有一個替換好的 HTML 結構
  • 一半來說用的不是太多 40%
  • 一般是在結構搭建好以後對某些元素進行特殊處理的時候使用

• beforeUpdate 是在當前例項更新前

  • 更新前執行的回撥函式
  • 因為 $el 是個引用資料型別，所以不能直接列印他，因為打印出來的東西也是更新後的
  • 使用率40%

• updated 是在當前例項更新後

  • 更新後執行的回撥函式
  • 可以列印 $el 了，因為就是更新後的
  • 使用率40%

• beforeDestroy 銷燬前執行

  • 使用率5%

• destroyed 銷燬後執行

  • 基本不使用