vuejs2.0的生命週期解讀

 

每一個 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的綁定，即數據驅動