vuejs2.0 vue實例的生命周期

每個 Vue 實例在被創建之前都要經過一系列的初始化過程。例如，實例需要配置數據觀測(data observer)、編譯模版、掛載實例到 DOM ，然后在數據變化時更新 DOM 。下圖展示的就是一個vue實例對象的生命周期。

           

 

從圖上我們可以看到vue在生命周期中有這些狀態，beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed。Vue在實例化的過程中，會調用這些生命周期的鈎子，給我們提供了執行自定義邏輯的機會。那么，在這些vue鈎子中，vue實例到底執行了那些操作，我們先看下面執行的例子

 

var vm = new Vue({
    el: "#container",
    data: {
        test : 'hello world'
    },
    beforeCreate: function(){
        console.log(this);
        showData('創建vue實例前',this);
    },
    created: function(){
        showData('創建vue實例后',this);
    },
    beforeMount:function(){
        showData('掛載到dom前',this);
    },
    mounted: function(){
        showData('掛載到dom后',this);
    },
    beforeUpdate:function(){
        showData('數據變化更新前',this);
    },
    updated:function(){
        showData('數據變化更新后',this);
    },
    beforeDestroy:function(){
        vm.test ="3333";
        showData('vue實例銷毀前',this);
    },
    destroyed:function(){
        showData('vue實例銷毀后',this);
    }

});

function realDom(){
    console.log('真實dom結構：' + document.getElementById('container').innerHTML);
}
function showData(process,obj){
    console.log(process);
     console.log('data 數據：' + obj.test)
     console.log('掛載的對象：')
     console.log(obj.$el)
     realDom();
     console.log('------------------')
     console.log('------------------')
}

我們可以看到，vue對象初始化過程中，會執行到beforeCreate,created,beforeMount,mounted 這幾個鈎子的內容

beforeCreate ：數據還沒有監聽，沒有綁定到vue對象實例，同時也沒有掛載對象

created ：數據已經綁定到了對象實例，但是還沒有掛載對象

beforeMount: 模板已經編譯好了，根據數據和模板已經生成了對應的元素對象，將數據對象關聯到了對象的 $el屬性，$el屬性是一個HTMLElement對象，也就是這個階段，vue實例通過原生的createElement等方法來創建這個html片段，准備注入到我們vue實例指明的el屬性所對應的掛載點

mounted:將$el的內容掛載到了el，相當於我們在jquery執行了$(el).html($el),生成頁面上真正的dom，上面我們就會發現dom的元素和我們$el的元素是一致的。在此之后，我們能夠用方法來獲取到el元素下的dom對象，並進 行各種操作

 

當我們的data發生改變時，會調用beforeUpdate和updated方法

 

beforeUpdate ：數據更新到dom之前，我們可以看到$el對象已經修改，但是我們頁面上dom的數據還沒有發生改變

updated: dom結構會通過虛擬dom的原則，找到需要更新頁面dom結構的最小路徑，將改變更新到dom上面，完成更新

 

實例的銷毀

 

beforeDestroy,destroed :實例的銷毀，vue實例還是存在的，只是解綁了事件的監聽還有watcher對象數據與view的綁定，即數據驅動