Vue 組件生命周期

猿友 2021-02-18 20:32:06 瀏覽數(shù) (14915)

反饋

1. 組件的生命周期的四個階段

組件的生命周期分為四個階段：
- create（創(chuàng)建）
- mount（掛載）
- update（更新）
- destroy（銷毀）

2. 生命周期鉤子函數(shù)

2.1 鉤子函數(shù)定義

先看看官方的解釋：每個 Vue 實例在被創(chuàng)建時都要經(jīng)過一系列的初始化過程——例如，需要設置數(shù)據(jù)監(jiān)聽、編譯模板、將實例掛載到 DOM 并在數(shù)據(jù)變化時更新 DOM 等。同時在這個過程中也會運行一些叫做生命周期鉤子的函數(shù)，這給了用戶在不同階段添加自己的代碼的機會。
鉤子函數(shù)到底是個啥意思呢？組件在加載的過程中，加載到某個階段時，自動觸發(fā)的函數(shù)

2.2 鉤子函數(shù)理解與實例

鉤子函數(shù)有哪些？怎么用？

結(jié)合圖來看~~~下圖展示了組件的生命周期的過程：（下面會詳細解釋每個）

無標題

1. beforeCreate 在實例初始化之后，數(shù)據(jù)觀測(data observer) 和 event/watcher 事件配置之前被調(diào)用；如果在 beforeCreate 函數(shù)里面去訪問 data 數(shù)據(jù)對象，是訪問不到的

<body>
  <div id="app">
    <input type="text" v-model="msg">
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:'123'
      },
      watch:{
        msg:function(){
          console.log("我變了");
        }
      },
      beforeCreate(){
        console.log("創(chuàng)建組件data對象之前自動觸發(fā)~~~");
        console.log("beforeCreate",this.msg);
      }
    })
  </script>
</body>

結(jié)果：在 beforeCreate 函數(shù)中無法得到 msg 的值
在這里插入圖片描述
2. created

在執(zhí)行 created 函數(shù)前，已經(jīng)有了數(shù)據(jù)對象 data，以及完成了事件的初始化，但$el 屬性目前不可見；
在 created 函數(shù)里面可以使用數(shù)據(jù)，也可以更改數(shù)據(jù)；
調(diào)用 Vue 方法，可以獲取原本 HTML 上的直接加載出來的 DOM，但是無法獲取到通過掛載模板生成的 DOM（例如：v-for循環(huán)遍歷 Vue.list 生成 li）

<body>
  <div id="app">
    <input type="text" v-model="msg">
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:'123'
      },
      watch:{
        msg:function(){
          console.log("我變了");
        }
      },
      beforeCreate(){
        console.log("創(chuàng)建組件data對象之前自動觸發(fā)~~~");
        console.log("beforeCreated",this.msg);

      },
      created:function(){
        console.log("創(chuàng)建組件data對象之后自動觸發(fā)~~~");
        this.msg=100000;
        console.log("created",this.msg);   
        console.log("li數(shù)量：",document.getElementsByTagName("li").length);
        console.log("p數(shù)量：",document.getElementsByTagName("p").length); 
      }
    })
  </script>

結(jié)果：在 created 函數(shù)中我們成功的拿到了、更改了 msg 的值。并且數(shù)據(jù)被更改后出發(fā)了watch 屬性中的方法。而且可以獲取原本HTML 上的直接加載出來的 DOM（p 元素），但是無法獲取到通過掛載模板生成的 DOM（例如：v-for 循環(huán)遍歷 Vue.list 生成 li 元素）在這里插入圖片描述

注意：create階段還沒有創(chuàng)建虛擬dom

3.beforeMount

在掛載開始之前被調(diào)用，相關的（渲染函數(shù)）模板首次被調(diào)用。$el 屬性可見。但此時在 beforeMount 函數(shù)中依然無法無法獲取到通過掛載模板生成的DOM（例如：v-for 循環(huán)遍歷 Vue.list 生成 li 元素）
在此函數(shù)之前都沒有建立虛擬dom

beforeMount:function(){
        console.log(this.$el);
        console.log("li數(shù)量：",document.getElementsByTagName("li").length);
      }

結(jié)果：

screenshot-20210218-194134

4.mounted

執(zhí)行完 beforeMount 函數(shù)后，$e l elel 被新創(chuàng)建的 vm.$el 替換，并掛載到實例上去之后調(diào)用該鉤子函數(shù)。
這里才能獲取初始數(shù)據(jù)list渲染出來的li
掛載后我們已經(jīng)可以看見網(wǎng)頁內(nèi)容了，只不過還未操作

mounted:function(){
        console.log(this.$el);
        console.log("li數(shù)量：",document.getElementsByTagName("li").length);
      }

結(jié)果：同樣的代碼，放在 beforeMount 和 mounted 函數(shù)中結(jié)果完全不一樣

在這里插入圖片描述

在 update 階段，虛擬 dom 監(jiān)聽數(shù)據(jù)變化，隨時更新 dom

5. beforeUpdate 當數(shù)據(jù)發(fā)生變化的時候，beforeUpdate 這個鉤子函數(shù)才會執(zhí)行

6. updated 虛擬 dom 重新渲染后執(zhí)行

7.beforeDestroy 實例銷毀之前調(diào)用。在這一步，實例仍然完全可用

8.destroyedVue 實例銷毀后調(diào)用。調(diào)用后，Vue 實例指示的所有東西都會解綁定，所有的事件監(jiān)聽器會被移除，所有的子實例也會被銷毀。

<body>
  <div id="app">
    <input type="text" v-model="msg">
    <ul>
      <li v-for="(elem,index) of list" :key="index">{{elem}}</li>
    </ul>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <h1>數(shù)量：{{count}}</h1>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
        msg:'123',
        list:['a','b','c'],
        count:0
      },
      watch:{
        msg:function(){
          console.log("我變了");
        }
      },
      beforeCreate(){
        console.log("創(chuàng)建組件data對象之前自動觸發(fā)~~~");
        console.log("beforeCreated",this.msg);

      },
      created:function(){
        console.log("創(chuàng)建組件data對象之后自動觸發(fā)~~~");
        this.msg=100000;
        console.log("created",this.msg); 
        console.log("li數(shù)量：",document.getElementsByTagName("li").length);
        console.log("p數(shù)量：",document.getElementsByTagName("p").length);  
      },
      beforeMount:function(){
        console.log(this.$el);
        console.log("li數(shù)量：",document.getElementsByTagName("li").length);
      },
      mounted:function(){
        console.log(this.$el);
        console.log("li數(shù)量：",document.getElementsByTagName("li").length);
        setInterval(()=>{
          this.count++;
        },1000)
      },
      beforeUpdate(){
        console.log("更新組件的data變量前自動觸發(fā)~~~")
      },
      updated(){
        console.log("更新組件的data變量后自動觸發(fā)~~~");
        if(this.count>3){
          this.$destroy();
        }
      },
      beforeDestroy(){
        console.log("銷毀當前組件前自動觸發(fā)~~~")
      },
      destroyed(){
        console.log("銷毀組件后自動觸發(fā)~~~");
      }
    })
  </script>
</body>

結(jié)果：

screenshot-20210218-194001

組件的生命周期就是這樣啦~

Vue.js

2 人點贊