vue生命周期鉤子函式

目錄

生命周期

生命周期圖解

初始化階段

掛載階段

更新階段

銷毀階段

完整代碼(內含詳細注釋)

總結

• 生命周期

• 一個組件從創建到銷毀的整個程序就是生命周期
• 分為4個階段,8個方法
• 

• 生命周期圖解

  • 

  • 初始化階段

  • 

  • 含義

    • 1.new Vue() – Vue實體化(組件也是一個小的Vue實體)

    • 2.Init Events & Lifecycle – 初始化事件和生命周期函式

    • 3.beforeCreate – 生命周期鉤子函式被執行

    • 4.Init injections&reactivity – Vue內部添加data和methods等

    • 5.created – 生命周期鉤子函式被執行, 實體創建

    • 6.接下來是編譯模板階段 –開始分析

    • 7.Has el option? – 是否有el選項 – 檢查要掛到哪里

      • 沒有. 呼叫$mount()方法

      • 有, 繼續檢查template選項

  • 例子

    • <script>
      export default {
          data(){
              return {
                  msg: "hello, Vue"
              }
          },
          // 一. 初始化
          // new Vue()以后, vue內部給實體物件添加了一些屬性和方法, data和methods初始化"之前"
          beforeCreate(){
              console.log("beforeCreate -- 執行");
              console.log(this.msg); // undefined
          },
          // data和methods初始化以后
          // 場景: 網路請求, 注冊全域事件
          created(){
              console.log("created -- 執行");
              console.log(this.msg); // hello, Vue
      
              this.timer = setInterval(() => {
                  console.log("哈哈哈");
              }, 1000)
          }
      }
      </script>

  • 掛載階段

    • 

    • 含義

      • 1.template選項檢查

        • 有 - 編譯template回傳render渲染函式

        • 無 – 編譯el選項對應標簽作為template(要渲染的模板)

      • 2.虛擬DOM掛載成真實DOM之前
      • 3.beforeMount – 生命周期鉤子函式被執行
      • 4.Create … – 把虛擬DOM和渲染的資料一并掛到真實DOM上
      • 5.真實DOM掛載完畢
      • 6.mounted – 生命周期鉤子函式被執行
    • 例子

      • <template>
          <div>
              <p>學習生命周期 - 看控制臺列印</p>
              <p id="myP">{{ msg }}</p>
          </div>
        </template>
        
        <script>
        export default {
            // ...省略的為上面的初始化代碼
            // 二. 掛載
            // 真實DOM掛載之前
            // 場景: 預處理data, 不會觸發updated鉤子函式
            beforeMount(){
                console.log("beforeMount -- 執行");
                console.log(document.getElementById("myP")); // null
        
                this.msg = "重新值"
            },
            // 真實DOM掛載以后
            // 場景: 掛載后真實DOM
            mounted(){
                console.log("mounted -- 執行");
                console.log(document.getElementById("myP")); // p
            }
        }
        </script>

  • 更新階段

    • 

    • 含義

      • 1.當data里資料改變, 更新DOM之前

      • 2.beforeUpdate – 生命周期鉤子函式被執行

      • 3.Virtual DOM…… – 虛擬DOM重新渲染, 打補丁到真實DOM

      • 4.updated – 生命周期鉤子函式被執行

      • 5.當有data資料改變 – 重復這個回圈

    • 例子

      • <template>
          <div>
              <p>學習生命周期 - 看控制臺列印</p>
              <p id="myP">{{ msg }}</p>
              <ul id="myUL">
                  <li v-for="(val, index) in arr" :key="index">
                      {{ val }}
                  </li>
              </ul>
              <button @click="arr.push(1000)">點擊末尾加值</button>
          </div>
        </template>
        
        <script>
        export default {
            data(){
                return {
                    msg: "hello, Vue",
                    arr: [5, 8, 2, 1]
                }
            },
            // ...省略其他代碼
        
            // 三. 更新
            // 前提: data資料改變才執行
            // 更新之前
            beforeUpdate(){
                console.log("beforeUpdate -- 執行");
                console.log(document.querySelectorAll("#myUL>li")[4]); // undefined
            },
            // 更新之后
            // 場景: 獲取更新后的真實DOM
            updated(){
                console.log("updated -- 執行");
                console.log(document.querySelectorAll("#myUL>li")[4]); // li
            }
        }
        </script>

  • 銷毀階段

    • 

    • 含義

      • 1.當$destroy()被呼叫 – 比如組件DOM被移除(例v-if)

      • 2.beforeDestroy – 生命周期鉤子函式被執行

      • 3.拆卸資料監視器、子組件和事件偵聽器

      • 4.實體銷毀后, 最后觸發一個鉤子函式

      • 5.destroyed – 生命周期鉤子函式被執行

  • 完整代碼(內含詳細注釋)

  • <template>
      <div>
        <h4>生命周期_1_初始化</h4>
        <p>{{ msg }}</p>
        <h4>生命周期_2_掛載</h4>
        <ul id="myUl">
          <li v-for="(val, ind) in arr" :key="ind">{{ val }}</li>
        </ul>
        <h4>生命周期_3_更新</h4>
        <button @click="addFn">點擊更新</button>
        <h4>生命周期_4_銷毀</h4>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          msg: "我是msg",
          arr: [5, 2, 1],
          timer: null,
          fn: null,
        };
      },
      methods: {
        addFn() {
          this.arr.push(0);
        },
      },
      //----------------------初始化---------------------------------
      // 初始化之前
      beforeCreate() {
        console.log("初始化之前", this.msg);
      },
      // 初始化之后
      created() {
        //可以操作變數
        console.log("初始化之后", this.msg);
        this.timer = setInterval(() => {
          console.log(1);
        }, 50000);
        this.fn = () => {
          // console.log('視窗改變');
        };
        window.addEventListener("resize", this.fn);
      },
      //----------------------掛載---------------------------------
      // 掛載之前
      beforeMount() {
        console.log("掛載之前", document.querySelectorAll("#myUl>li"));
      },
      mounted() {
        // 拿到的為真實DOM
        console.log("掛載之后", document.querySelectorAll("#myUl>li"));
      },
      //----------------------更新(資料)---------------------------------
      beforeUpdate() {
        console.log(
          "更新之后",
          document.querySelectorAll("#myUl>li")[this.arr.length - 1]
        );
      },
      updated() {
        // 更新的為真實的DOM
        console.log(
          "更新之后",
          document.querySelectorAll("#myUl>li")[this.arr.length - 1]
        );
      },
      //----------------------銷毀---------------------------------
      beforeDestroy() {
        console.log("將要銷毀此組件");
      },
      destroyed() {
        // 當前組件占用的資源全部被釋放掉
        // 定時器,全域事件,計時器
        console.log("此組件即將被銷毀");
        clearInterval(this.timer);
        window.removeEventListener("resize", this.fn);
      },
      // 生命周期結論(記著)
      // 1.在created里操作data里的變數(發送網路請求(在mounted),早發早享受)
      // 2.mounted里獲取真實的DOM
      // 3.Updated里獲取更新后的真實DOM
      // 4.destroyed
      //    (v-if或者組件實體this.$destroyed()) -> 此組件被銷毀
      // 作用:
      //    停止計時器/定時器/全域事件(組件占有的全域資源全部釋放掉)
    };
    </script>
    
    <style>
    </style>

  • 總結

    • vue實體從創建到編譯模板執行了beforeCreate / created鉤子函式
    • created函式觸發能獲取data, 不能獲取真實DOM
    • vue實體從創建到顯示都經歷beforeCreate / created / beforeMount / mounted鉤子函式
    • created函式里, 不能獲取真實DOM
    • 在mounted鉤子函式里可以獲取真實DOM
    • 當資料發生變化并更新頁面后執行updated鉤子函式
    • 在updated鉤子函式里可以獲取更新后的DOM
    • 一般在beforeDestroy/destroyed里手動消除計時器/定時器/全域事件