Vue生命周期/鉤子函數的理解

阿新 • • 發佈：2018-11-09

理解回調 troy ext pla title .net opened ()

對於實現頁面邏輯交互等效果，我們必須弄懂vue的生命周期，知道我們寫的東西應該掛載到哪裏。vue官方api給了簡單的邏輯，如下:

　　所有的生命周期鉤子自動綁定this上，因此你可以訪問數據，屬性和方法進行運算，所以要特別註意的是不能使用箭頭函數來定義一個生命周期方法(例如created: () => this.fetchTodos())。

　　下面附加一張生命周期圖示

　　　技術分享圖片

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
</div>

<script type="text/javascript">
    var 
 app = new Vue({
        el: ‘#app‘,
        data: {
            message: "this is a test"
        },
        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)
        },
        created: function () {
            console.group(‘created 創建完畢狀態===============》‘);
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this 
.$data); //已被初始化
            console.log("%c%s", "color:red", "message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group(‘beforeMount 掛載前狀態===============》‘);
            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); //已被初始化
        },
        mounted: function () {
            console.group(‘mounted 掛載結束狀態===============》‘);
            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); //已被初始化
        },
        beforeUpdate: function () {
            console.group(‘beforeUpdate 更新前狀態===============》‘);
            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);
        },
        updated: function () {
            console.group(‘updated 更新完成狀態===============》‘);
            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);
        },
        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>

View Code

技術分享圖片

詳解：

　　特別說明:掛載完成就是頁面渲染完成

　　1. beforeCreate

　　　 官方說明：在實例初始化之後，數據觀測(data observer) 和 event/watcher 事件配置之前被調用。

　　　　解釋：這個時期，this變量還不能使用，在data下的數據，和methods下的方法，watcher中的事件都不能獲得到,頁面也沒掛載；

　　2. created

　　　　官方說明：實例已經創建完成之後被調用。在這一步，實例已完成以下的配置：數據觀測(data observer)，屬性和方法的運算， watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。

　　　　解釋說明： 這個時候可以操作vue實例中的數據和各種方法，但是還不能對"dom"節點進行操作；

　　3.beforeMounte

　　　　官方說明：在掛載開始之前被調用：相關的 render 函數首次被調用。需要註意的是在這步，this.$el可以獲得。但僅僅獲得是dom節點，{{}}裏的值並沒有渲染，詳見上圖控制臺圖。

　　4.mounted

　　　　官方說明：el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果root實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
解釋說明：掛載完畢，這時dom節點被渲染到文檔內，一些需要dom的操作在此時才能正常進行

 　　mounted() {
  　　 $(‘select‘).select2(); // jQuery插件可以正常使用
 　　},

Vue生命周期/鉤子函數的理解

理解回調 troy ext pla title .net opened () 對於實現頁面邏輯交互等效果，我們必須弄懂vue的生命周期，知道我們寫的東西應該掛載到哪裏。vue官方api給了簡單的邏輯，如下: 　　所有的生命周期鉤子自動綁定this上，因此你可以訪問數據

Vue生命周期/鉤子函數的理解

Vue生命周期/鉤子函數的理解

Vue生命周期鉤子函數

vue生命周期鉤子函數解讀步驟

Vue生命周期鉤子函數和組件傳值

vue.js生命周期鉤子函數及緩存

vue之生命周期鉤子函數

react 生命周期鉤子函數

React 生命周期鉤子函數詳解

vue 生命周期鉤子的理解 watch computed

VUE生命周期鉤子

vue生命周期和鉤子函數的理解

Vue的鉤子函數[路由導航、keep-alive、生命周期鉤子]

Vue基礎進階之 Vue生命周期與鉤子函數

Vue生命周期函數詳解

Vuejs——Vue生命周期，數據，手動掛載，指令，過濾器

vue生命周期的理解

vue - 生命周期第二次學習與理解

【Vue】詳解Vue生命周期

Vue源碼後記-鉤子函數

vue-router使用以及vue下的nextTick鉤子函數

Vue生命周期/鉤子函數的理解

相關推薦