【乾貨】詳解vue生命週期

生命週期定義

每一個vue實例在被建立以前都要通過一系列的初始化過程，這個過程就是vue的生命週期。詳細來講，就是Vue實例從開始建立，初始化數據，編譯模板，掛在dom->渲染，更新->渲染，卸載等一系列過程，咱們稱這是vue的生命週期，各個階段有相對應的事件鉤子。

鉤子函數：當代碼執行到特定階段的時候會調用的函數，也是回調函數。

生命週期示意圖

代碼解析生命週期

1.new Vue() 建立實例

2.初始化事件和生命週期

3.beforeCreate

代碼：

let vm = new Vue({
    // 當前這個實例他的父親是誰 兒子誰 有一套
    beforeCreate(){
        console.log(this); 
        console.log('---beforeCreate---');    
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
複製代碼

從打印出來的this，能夠看到此時發佈訂閱 emit等vue原生API已經初始化完成。可是不能訪問到data,computed,watch，methods上的方法和數據。這個鉤子函數不能作業務邏輯，通常狀況下這個鉤子函數能夠作的事情：在每一個組建中增長一些特定的屬性，例如混合。

4.初始化注入和校驗

5.created

這個實例已經實現了數據劫持，把方法、計算屬性 也都掛載到了實例，不能獲取到真實的dom元素。不能訪問到 ref屬性內容未空數組。 這個鉤子函數能夠發送axios請求把請求回來的數據保存到data中。

let vm = new Vue({
    beforeCreate(){
        console.log(this);
        console.log('---beforeCreate---'); 
    },
    created(){
        console.log(this);
        console.log('---created---');
        debugger;
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
複製代碼

6.beforemount

接下來就是渲染，可是在渲染以前會先判斷「是否有制定的el選項」，正常的寫法：el:'app',另外一種用：vm.$mount('app')

$mount 能夠指定一個元素，不指定元素的話，內部會默認渲染到一個內存中的節點

let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    beforeMount(){
        console.log('---beforeMount---') 
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
vm.$mount()
複製代碼

雖然渲染失敗了，可是走到了beforeMount這個鉤子函數，它的要求是要麼有個template,或者有個render函數。 把二者中一個加上：

render(){
        
    },
template:'<div>hello</div>',
複製代碼

驗證一下咱們以前沒有指定el，渲染在內存中，咱們把它掛載到頁面中去。

vm.$mount()
console.log(vm.$el)
document.body.appendChild(vm.$el)
複製代碼

好處：能夠把渲染好的元素插入到本身想要的節點中。

在生命週期流程圖中，判讀完el選項後，就會再判讀是否有「指定的template選項」，是就將template編譯到render函數中，沒有則將el外部的HTML做爲template 編譯。 什麼叫作el外部的HTML？就是咱們經常使用：

<div id="app"></div>
vm.$mount('#app')
複製代碼

這個div就是el外部的HTML，再統一編譯到render函數中。

let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    render(){
        console.log('---render---') 
    },
    template:'<div>hello</div>',
    beforeMount(){
        console.log('---beforeMount---') 
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
vm.$mount('#app')
console.log(vm.$el)
document.body.appendChild(vm.$el)
複製代碼

若是有了render就不會使用template，它內部會把template渲染成render方法，因此在掛載以前會調用render方法。

優先級關係：render>template>out html

beforeMount 作的事情就是調用render方法，可是通常不會增長業務邏輯

7.mounted

實例掛載到DOM上，此時能夠經過DOM API獲取到DOM節點，$ref屬性能夠訪問。

let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    template:'<div>hello</div>',
    beforeMount(){
        console.log('---beforeMount---') 
    },
    mounted(){
        console.log('---mounted---') 
        console.log(vm.$el)
    },
    data(){
        return{
            msg:'hello'
        }
    }
})
vm.$mount('#app')
複製代碼

8.beforeupdate

vue 更新方式是組件級別的，好比咱們項目會有許多組件，在根組件中引用3個組件，其中一個組件更新從新渲染了（異步渲染），另外兩個不會從新渲染。

能夠在這個鉤子函數中，增長一些數據更新，不會致使試圖屢次更新。 響應式數據更新時調用，發生在虛擬DOM打補丁以前。 組件更新以前執行的函數。 數據更新了，可是，vue（組件）對象對應的dom中的內部（innerHTML）沒有變，因此叫做組件更新前。

<div id="app">{{msg}}</div>
<script>
let vm = new Vue({
    beforeCreate(){
        console.log('---beforeCreate---')    
    },
    created(){
        console.log(this) 
        console.log('---created---') 
    },
    beforeMount(){
        console.log('---beforeMount---') 
    },
    mounted(){
        console.log('---mounted---') 
        console.log(vm.$el)
    },
    beforeupdate(){
        console.log('---beforeupdate---') 
    },
    data(){
        return{
            msg:'10'
        }
    }
})
vm.$mount('#app')
</script>
複製代碼

數據是應用到視圖上纔會變化。

9.updated

虛擬 DOM 從新渲染和打補丁以後調用，組件DOM已經更新，可執行依賴於DOM的操做.

這個鉤子函數就不要再去更新數據，可能會發生死循環

updated(){
        this.msg= Math.random();
        console.log('---updated---') 
    },
複製代碼

更新後會從新渲染，同時再走一邊rander方法

10.beforeDestroy

實例銷燬以前調用。這一步，實例仍然徹底可用，this仍能獲取到實例 這個鉤子函數通常作事件的移除、清空定時器

11.destory

常見的銷燬方式：手動（ vm.$destory()移除全部的觀察者 ）、移除組件、路由切換 實例銷燬後調用，調用後，Vue 實例指示的全部東西都會解綁定，全部的事件監聽器會被移除，全部的子實例也會被銷燬。視圖並不會刷新，