目錄

• 1.什麼是生命週期
• 2. 的生命週期
• 3.生命週期鉤子函式

1.什麼是生命週期

Vue 例項有一個完整的生命週期，也就是從開始建立、初始化資料、編譯模板、掛載 Dom、渲染 → 更新 → 渲染、解除安裝等一系列過程，我們稱這是 Vue 的生命週期。通俗說就是 Vue 例項從建立到銷燬的過程，就是生命週期。

在 Vue 的整個生命週期中，它提供了一系列的事件，可以讓我們在事件觸發時註冊 方法，可以讓我們用自己註冊的 js 方法控制整個大局，在這些事件響應方法中的 this 直接指向的是 vue 的例項。

2.vue 的生命週期

生命週期函式，又叫鉤子函式（生命週期鉤子===生命週期函式=wtHtzynhH

vue 中的生命週期函式，一般都是 成對出現。所以我們成對比較一下，他們的區別。

10 個生命週期函式 牢記！具體使用！

3.生命週期鉤子函式

特點：自動呼叫的，只是他們的呼叫的時間節點 有 先 有 後。

在官網上拿了張圖：

beforeCreate --- vue例項"建立前",注意：在這個函式中，vue中data資料中心的資料，它是讀不到的。

  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',data:{
                name:"哈哈哈",
 
              num:1111
            },methods: {
                
            },// vue例項建立之前
            beforeCreate(){
                console.log('beforeCreate');
                console.log(this.name);
            }
    </script>

輸出資料中心的 name 是讀不到的：

created --- vue例項"建立後",注意：在這個函式中，可以識別 到 vue中data資料中心的資料
  <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',num:1111
            },// vue例項建立之後
            created(){
                console.log("created");
                console.log(this.name);
  wtHtzynhH
 
          }
        })
    </script>

檢視結果：

beforeMount --- DOM掛載之前 this.$el---此時的$el為“虛擬的”DOM節點

在檢視層渲染標籤:

  <div id="app">
        <p>{{name}}</p>
        <p>{{num}}</p>
    </div>
<script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',// dom掛載之前
            beforeMount(){
                console.log("beforeMount");
                   //檢視dom元素
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

dom掛載前輸出結果：

 mounted ---DOM掛載之後    this.$el---此時的$el為“真實的”DOM節點
 
    <script src="./js/vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',// dom掛載之後
            mounted(){
                console.log("mounted");
                console.log(document.body.querySelector("#app").innerHTML);
            }
        })
    </script>

檢視輸出結果：

• beforeUpdate --- 資料更新之前（----檢視層中的資料的前後變化）
• updated --- 資料更新之後（----檢視層中的資料的前後變化）
  

在檢視層通過 點選讓 num 的數值發生改變來模擬資料更新，檢視結果：

  
    <div id="app">
    www.cppcns.com    <p id="num">{{num}}</p>
        <button @click="num++">點選資料更新(num+1)</button>
    </div>
  // 資料更新前
            beforeUpdate(){
                console.log("bewtHtzynhHforeUpdate--資料更新前");
                // 檢視dom元素
                console.log(document.body.querySelector("#num").innerHTML);
            },// 資料更新後
            updated(){
                console.log("updated--資料更新後");
                // 檢視dom元素
                console.log(document.body.querySelector("#num").innerHTML);
            }

此時資料無變化時，在控制檯是看不到效果的，當我們點選按鈕後：

到此這篇關於vue中的生命週期及鉤子函式的文章就介紹到這了,更多相關vue中的生命週期鉤子函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！