Vue例項的生命週期鉤子

鐵錘妹妹的學習日記發表於2020-11-06
Vue

最近在學習Vue，接觸到了Vue的生命週期鉤子，看了視訊也百度了一些相關的，在這做一下筆記吧~

生命週期函式就是vue例項在某一個時間點會自動執行的函式

文章目錄

涉及到的生命週期鉤子

放上官方的生命週期圖：
在這裡插入圖片描述
圖上涉及到的生命週期鉤子有8個

生命週期鉤子觸發的行為在這階段可操作的例子
beforeCreatevue例項的掛載元素$el和資料data都為undefined，還未初始化。可在這加個loading事件
createdvue例項的資料data有了，$el還沒有，DOM未生成結束loading，還可做一些初始化，實現函式自執行
beforeMountvue例項的$el和data都初始化了，但還是虛擬的dom節點，頁面還未被渲染。先把坑佔住，到後面mounted掛載的時候再把值渲染進去。
mountedvue例項掛載完成，虛擬的DOM變成真實DOM在這發起後端請求，拿回資料，配合路由鉤子做一些事情
beforeUpdatedata中的資料發生改變，還沒有重新渲染之前呼叫
updateddata中的資料發生改變，重新渲染之後呼叫資料更新時，做一些處理（此處也可以用watch進行觀測）
beforeDestroy元件銷燬前呼叫給使用者提示，比如“您確定刪除xxx嗎？”
destroyed元件銷燬後呼叫，vue例項解除了事件監聽以及和dom的繫結（無響應了），但DOM節點依舊存在當前元件已被刪除，清空相關內容

除了這8個還有另外2個

activated使用keep-alive，快速實現頁面快取時，元件被啟用時呼叫
deactivated使用keep-alive，不想某個頁面有快取時，元件被移除時呼叫

結合程式碼去理解鉤子函式

附上大佬的程式碼，簡潔易懂：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue例項的生命週期鉤子</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{message}}</p>
    <input type="button" @click="change" value="更新資料" />
  </div>
  <script>
    // 生命週期函式就是vue例項在某一個時間點會自動執行的函式
    var app = new Vue({
      el:'#app',
      data: {
        message : "Vue例項的生命週期鉤子"
      },
      methods: {
        change(){
          this.message = '更新快更新'
        }
      },
      beforeCreate: function () {
            console.group('beforeCreate 建立前狀態===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
      created: function () {
          console.group('created 建立完畢狀態===============》');
          console.log("%c%s", "color:red","el     : " + this.$el); //undefined
          console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
          console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
      },
      beforeMount: function () {
            console.group('beforeMount 掛載前狀態===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 當前掛在的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
      mounted: function () {
          console.group('mounted 掛載結束狀態===============》');
          console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
          console.log(this.$el);
          console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
          console.log("%c%s", "color:green","message: " + this.message); //已被初始化
      },
      beforeUpdate: function () {
            alert("更新前狀態");
            console.group('beforeUpdate 更新前狀態===============》'); //這裡指的是頁面渲染新資料之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前狀態2");
        },
      updated: function () {
          console.group('updated 更新完成狀態===============》');
          console.log("%c%s", "color:green","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:green","data   : " + this.$data);
          console.log("%c%s", "color:green","message: " + this.message);
      },
      beforeDestroy: function () {
          console.group('beforeDestroy 銷燬前狀態===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data);
          console.log("%c%s", "color:red","message: " + this.message);
      },
      destroyed: function () {
          console.group('destroyed 銷燬完成狀態===============》');
          console.log("%c%s", "color:red","el     : " + this.$el);
          console.log(this.$el);
          console.log("%c%s", "color:red","data   : " + this.$data);
          console.log("%c%s", "color:red","message: " + this.message)
      }
  })
  </script>
</body>
</html>

主要就是去檢視列印出來的順序和結果！！！ 效果：

在這裡插入圖片描述
另外在紅框地方，我們能發現el還是 {{message}}，這裡就是應用的 Virtual DOM（虛擬Dom）技術，頁面還未被渲染，先把坑佔住了。到後面mounted掛載的時候再把值渲染進去。

在這裡插入圖片描述
當vue發現data中的資料發生了改變，會觸發對應元件的重新渲染，先後呼叫beforeUpdate和updated鉤子函式。

注意beforeUpdate是指view層的資料變化前，不是data中的資料改變前觸發。因為Vue是資料驅動的。注意觀察彈窗就容易發現。

destroyed鉤子函式有一點一定要特別注意：在執行destroy方法後，對data的改變不會再觸發周期函式，此時的vue例項已經解除了事件監聽以及和dom的繫結，但是dom結構依然存在。所以對於實時顯示的通知型元件，在他destroyed之前，我們必須手動removeChild()刪除該節點；否則，DOM節點還是存在，影響瀏覽器效能。

注意：不要在生命週期鉤子上使用箭頭函式，如果生命週期使用了箭頭函式，那麼this就會指向window而不是當前Vue例項

最後附上參考連結：
https://www.cnblogs.com/xiaobaibubai/p/8383952.html
https://blog.csdn.net/qq_35585701/article/details/81216704

相關文章