【Vue原理】生命週期 - 源碼版

寫文章不容易，點個讚唄兄弟
專一 Vue 源碼分享，文章分爲白話版和 源碼版，白話版助於理解工做原理，源碼版助於瞭解內部詳情，讓咱們一塊兒學習吧
研究基於 Vue版本 【2.5.17】

若是你以爲排版難看，請點擊 下面連接 或者 拉到 下面關注公衆號也能夠吧

【Vue原理】生命週期 - 源碼版

好的！今天探索Vue的生命週期，鑑於生命週期這個東西很簡單，因此直接寫源碼版了

簡單到什麼程度呢，就是直接執行你的 created 什麼的，只是分在何時執行而已

可是！咱們仍然要分兩個問題，理清思路方便記憶

一、生命鉤子怎麼觸發
二、生命鉤子在何時觸發

---

鉤子怎麼觸發

首先，我設置了下面的例子

那麼 el 和 created 就是你傳入 Vue 的自定義選項啦

一、把全部同類鉤子先合併成數組，而後存放在 vm.$options

這個點跟 mixins 有關，能夠看這篇下對鉤子的合併處理

【Vue原理】Mixins - 源碼版

合併，主要是爲了把全局設置的鉤子和 組件自定義的鉤子合併起來，就算你沒有全局鉤子，也要存在數組裏面，好比 created 是下面

vm.$options={
    created:[fn,fn,fn...]
}

二、初始化設置一些標誌位，代表是否已經完成某種鉤子

function initLifecycle(vm) {
    vm._isMounted = false;
    vm._isDestroyed = false;
    vm._isBeingDestroyed = false;
}

這個函數會在 beforeCreated 鉤子觸發前調用，在 Vue.prototype._init 中，下個問題源碼有顯示。其中的標誌位何時設置呢，是在相應的鉤子觸發以後，具體看下面源碼

3怎麼執行鉤子呢

沒錯，就是下面這個函數

function callHook(vm, hook) {    

    // 是本身傳入的 created 等回調

    var handlers = vm.$options[hook];    

    if (handlers) {        

    for (var i = 0,j = handlers.length; i < j; i++) {

            handlers[i].call(vm);
        }
    }
}

那是怎麼用呢？

好比觸發 created 就會這麼調用

callHook(vm,'created')

很簡單4不4，直接拿到鉤子，而後遍歷執行，綁定上下文對象。

爲何是數組？上面已經說過啦，一個實例經過mixins可能有不少個相同鉤子，因此合併成的數組

---

鉤子何時觸發

要說講解鉤子在何時觸發把，好像也沒什麼講的，Vue文檔都說清楚了，可是很顯然，因此咱們直接以源碼的形式給出來

下面就說了幾個鉤子，有幾個感受不太經常使用，就不列出來了

function Vue(opt){    

    this._init(opt)

}



Vue.prototype._init(opt){
    ... 合併選項
    ... 設置初始值 ，事件 等數據
    initLifecycle(vm)
    callHook(vm, 'beforeCreate');
    ... 初始化選項等數據
    callHook(vm, 'created');
    ...獲取掛載的DOM 父節點
    callHook(vm, 'beforeMount');
    ...解析模板成渲染函數，並執行渲染函數，生成DOM插入頁面
    vm._isMounted = true;
    callHook(vm, 'mounted');
}



// 組件更新時會調用這個函數

Vue.prototype._update = function(

    vnode, hydrating

) {    

    if (vm._isMounted) {

        callHook(vm, 'beforeUpdate');
    }
    ...從新調用渲染函數，對比舊節點和新節點，獲得最小差別，而後只更新這部分頁面
    callHook(vm, 'updated');
}



// 節點被移除時會調用這個函數

Vue.prototype.$destroy = function() {
    callHook(vm, 'beforeDestroy');
    vm._isBeingDestroyed = true;
    ...實例被消除，移除全部 watcher
    vm._isDestroyed = true;
    ...DOM被移除
    callHook(vm, 'destroyed');
}