深入解析 Vue 的熱更新原理，尤大是如何巧用源碼中的細(xì)節(jié)？

大家都用過(guò) Vue-CLI 創(chuàng)建 vue 應(yīng)用，在開(kāi)發(fā)的時(shí)候我們修改了 vue 文件，保存了文件，瀏覽器上就自動(dòng)更新出我們寫(xiě)的組件內(nèi)容，非常的順滑流暢，大大提高了開(kāi)發(fā)效率。想知道這背后是怎么實(shí)現(xiàn)的嗎，其實(shí)代碼并不復(fù)雜。

這個(gè)功能的實(shí)現(xiàn)底層用了vue-hot-load-api^[1]這個(gè)庫(kù)，得益于 vue 的良好設(shè)計(jì)，熱更新的實(shí)現(xiàn)總共就一個(gè) js 文件，200 行代碼，綽綽有余。

而在這個(gè)庫(kù)里涉及到的技巧又非常適合我們?nèi)ド钊肓私?vue 內(nèi)部的一些機(jī)制，所以趕快來(lái)和我一起學(xué)習(xí)吧。

提要

本文單純的從vue-hot-load-api這個(gè)庫(kù)出發(fā)，在瀏覽器的環(huán)境運(yùn)行 Vue 的熱更新示例，主要測(cè)試的組件是普通的 vue 組件而不是 functional 等特殊組件，以最簡(jiǎn)單的流程搞懂熱更新的原理。
在源碼解析中貼出的代碼會(huì)省略掉一些不太相關(guān)的流程，更便于理解。

解析

從 github 倉(cāng)庫(kù)示例入手

進(jìn)入了這個(gè) github 倉(cāng)庫(kù)以后，最先開(kāi)始看的肯定是 Readme 的里的示例，在看示例的時(shí)候作者給出的注釋就非常重要了，他會(huì)標(biāo)注出每一個(gè)重要的環(huán)節(jié)。并且我們要結(jié)合自己的一些經(jīng)驗(yàn)排除掉和這個(gè)庫(kù)無(wú)關(guān)的代碼。（在這個(gè)示例中，webpack 的相關(guān)代碼就可以先不去過(guò)多關(guān)注）

第一步需要調(diào)用install方法，傳入 Vue 構(gòu)造函數(shù)，根據(jù)注釋來(lái)看，這一步是要知道這個(gè)庫(kù)與 Vue 版本之間是否兼容。

//?make?the?API?aware?of?the?Vue?that?you?are?using.
//?also?checks?compatibility.
api.install(Vue);

接下來(lái)的這段注釋告訴我們，每個(gè)需要熱更新的組件選項(xiàng)對(duì)象，我們都需要為它建立一個(gè)獨(dú)一無(wú)二的 id，并且這段代碼需要在初始化的時(shí)候完成。

if?(初始化)?{
??//?for?each?component?option?object?to?be?hot-reloaded,
??//?you?need?to?create?a?record?for?it?with?a?unique?id.
??//?do?this?once?on?startup.
??api.createRecord('very-unique-id',?myComponentOptions);
}

最后就是激動(dòng)人心的熱更新時(shí)間了，
根據(jù)注釋來(lái)看，這個(gè)庫(kù)的使用分為兩種情況。

• rerender 只有 template 或者 render 函改變的情況下使用。
• reload 如果 template 或者 render 未改變，則這個(gè)函數(shù)需要調(diào)用 reload 方法先銷毀然后重新創(chuàng)建（包括它的子組件）。

//?if?a?component?has?only?its?template?or?render?function?changed,
//?you?can?force?a?re-render?for?all?its?active?instances?without
//?destroying/re-creating?them.?This?keeps?all?current?app?state?intact.
api.rerender('very-unique-id',?myComponentOptions);

//?---?OR?---

//?if?a?component?has?non-template/render?options?changed,
//?it?needs?to?be?fully?reloaded.?This?will?destroy?and?re-create?all?its
//?active?instances?(and?their?children).
api.reload('very-unique-id',?myComponentOptions);

從這個(gè)簡(jiǎn)單的示例里面可以看出，這個(gè)庫(kù)的核心流程就是：

1. api.install 檢測(cè)兼容性。
2. api.createRecord 為組件對(duì)象通過(guò)一個(gè)獨(dú)一無(wú)二的 id 建立一個(gè)記錄。
3. api.rerender 或api.reload 進(jìn)行組件的熱更新。

什么，Readme 的示例到此就結(jié)束了？這個(gè) very-unique-id 到底是個(gè)什么東西，myComponentOptions 又是什么樣的。

因?yàn)檫@個(gè)倉(cāng)庫(kù)可能并不是面向廣大開(kāi)發(fā)者的，所以它的文檔寫(xiě)的非常的簡(jiǎn)略。其實(shí)看完了這個(gè)簡(jiǎn)短的示例，大家肯定還是一臉懵逼的。

在看一個(gè)你沒(méi)有熟練使用的庫(kù)的源碼的時(shí)候，其實(shí)還有一個(gè)很關(guān)鍵的步驟，那就是看測(cè)試用例。

探索測(cè)試用例

測(cè)試用例^[2]

上面我們總結(jié)出兩個(gè)關(guān)鍵 api rerender 和 reload 之后，就帶著目的性的去看測(cè)試用例。

const?Vue?=?require('vue');
const?api?=?require('../src');

//?初始化
api.install(Vue);

//?這個(gè)方法接受id和組件選項(xiàng)對(duì)象，
//?通過(guò)createRecord去記錄組件
//?然后返回一個(gè)vue組件實(shí)例。
function?prepare(id,?Comp)?{
??api.createRecord(id,?Comp);
??return?new?Vue({
????render:?h?=>?h(Comp),
??});
}

rerender 用例

const?id0?=?'rerender:?mounted';
test(id0,?done?=>?{
??//?用'rerender:?mounted'作為這個(gè)組件對(duì)象的id，
??//?這個(gè)組件的內(nèi)容應(yīng)該是?
foo
??//?調(diào)用?$mount生成dom節(jié)點(diǎn)
??const?app?=?prepare(id0,?{
????render:?h?=>?h('div',?'foo'),
??}).$mount();

??//?$el就是組件生成的dom元素，期望textContent文字內(nèi)容為foo
??expect(app.$el.textContent).toBe('foo');

??//?rerender?后dom節(jié)點(diǎn)變成?
bar
??api.rerender(id0,?{
????render:?h?=>?h('div',?'bar'),
??});

??//?通過(guò)nextTick保證dom節(jié)點(diǎn)已經(jīng)更新
??//?期望textContent文字內(nèi)容為bar
??Vue.nextTick(()?=>?{
????expect(app.$el.textContent).toBe('bar');
????done();
??});
});

reload 用例

const?id1?=?'reload:?mounted';
test(id1,?done?=>?{
??//?通過(guò)一個(gè)count來(lái)計(jì)數(shù)
??let?count?=?0;

??//?app組件會(huì)在created的時(shí)候讓count?+?1
??//?destroyed的時(shí)候讓count?-?1
??const?app?=?prepare(id1,?{
????created()?{
??????count++;
????},
????destroyed()?{
??????count--;
????},
????data:?()?=>?({?msg:?'foo'?}),
????render(h)?{
??????return?h('div',?this.msg);
????},
??}).$mount();
??//?確保內(nèi)容正確
??expect(app.$el.textContent).toBe('foo');
??//?確保created周期執(zhí)行?此時(shí)的count是1
??expect(count).toBe(1);

??//?調(diào)用created?傳入新組件的created時(shí)?count會(huì)-1
??api.reload(id1,?{
????created()?{
??????count--;
????},
????data:?()?=>?({?msg:?'bar'?}),
????render(h)?{
??????return?h('div',?this.msg);
????},
??});

??Vue.nextTick(()?=>?{
????//?確保內(nèi)容正確
????expect(app.$el.textContent).toBe('bar');
????//?在reload之前?count是1
????//?調(diào)用reload之后?會(huì)先調(diào)用前一個(gè)組件的destory生命周期?此時(shí)count是0
????//?接下來(lái)調(diào)用新組建的created生命周期?此時(shí)count是-1
????expect(count).toBe(-1);
????done();
??});
});

具體流程已經(jīng)在注釋里分析了，果然和示例代碼的注釋里寫(xiě)的一樣，而且現(xiàn)在我們也更清楚這個(gè) api 到底該怎么用了。

總結(jié)一個(gè)最簡(jiǎn)單的可用 demo

import?api?from?'vue-hot-reload-api';
import?Vue?from?'vue';

//?初始化
api.install(Vue,?true);

const?appOptions?=?{
??render:?h?=>?h('div',?'foo'),
};

api.createRecord('my-app',?appOptions);

new?Vue(appOptions).$mount('#app');

setTimeout(()?=>?{
??api.rerender('my-app',?{
????render:?h?=>?h('div',?'bar'),
??});
},?2000);

這個(gè) demo（源碼^[3]）是直接在瀏覽器可用的，效果如下：

源碼分析

源碼地址^[4]

全局變量

進(jìn)入 js 文件的入口，首先定義了一些變量

//?Vue構(gòu)造函數(shù)
let?Vue;?//?late?bind
//?Vue版本
let?version;
//?createRecord方法保存id?->?組件映射關(guān)系的對(duì)象
const?map?=?Object.create(null);
if?(typeof?window?!==?'undefined')?{
??//?將map對(duì)象存儲(chǔ)在window上
??window.__VUE_HOT_MAP__?=?map;
}
//?是否已經(jīng)安裝過(guò)
let?installed?=?false;
//?這個(gè)變量暫時(shí)沒(méi)用
let?isBrowserify?=?false;
//?初始化生命周期的名字?默認(rèn)是Vue的beforeCreate生命周期
let?initHookName?=?'beforeCreate';

其實(shí)看到 window 對(duì)象的出現(xiàn)，我們就已經(jīng)可以確定這個(gè) api 可以在瀏覽器端調(diào)用。

install

exports.install?=?function(vue,?browserify)?{
??//?如果安裝過(guò)了就不再重復(fù)安裝
??if?(installed)?{
????return;
??}
??installed?=?true;

??//?兼容es?modules模塊
??Vue?=?vue.__esModule???vue.default?:?vue;
??//?把vue的版本如2.6.3分隔成[2,?6,?3]?這樣的數(shù)組
??version?=?Vue.version.split('.').map(Number);
??isBrowserify?=?browserify;

??//?compat?with?
??//?兼容2.0.0-alpha.7以下版本
??if?(Vue.config._lifecycleHooks.indexOf('init')?>?-1)?{
????initHookName?=?'init';
??}

??//?只有Vue在2.0以上的版本才支持這個(gè)庫(kù)。
??exports.compatible?=?version[0]?>=?2;
??if?(!exports.compatible)?{
????console.warn(
??????'[HMR]?You?are?using?a?version?of?vue-hot-reload-api?that?is?'?+
????????'only?compatible?with?Vue.js?core?^2.0.0.'
????);
????return;
??}
};

可以看出 install 方法很簡(jiǎn)單，就是幫你看一下 Vue 的版本是否在 2.0 以上，確認(rèn)一下兼容性，關(guān)于初始化生命周期，在這篇文章里我們就不考慮 2.0.0-alpha.7 以下版本，可以認(rèn)為這個(gè)庫(kù)的初始化工作就是在 beforeCreate 這個(gè)生命周期進(jìn)行。

createRecord

/**
?*?Create?a?record?for?a?hot?module,?which?keeps?track?of?its?constructor
?*?and?instances
?*
?*?@param?{String}?id
?*?@param?{Object}?options
?*/

exports.createRecord?=?function(id,?options)?{
??//?如果已經(jīng)存儲(chǔ)過(guò)了就return
??if?(map[id])?{
????return;
??}

??//?關(guān)鍵流程?下一步解析
??makeOptionsHot(id,?options);

??//?將記錄存儲(chǔ)在map中
??//?instances變量應(yīng)該不難猜出是vue的實(shí)例對(duì)象。
??map[id]?=?{
????options:?options,
????instances:?[],
??};
};

這一步在把 id 和對(duì)應(yīng)的 options 對(duì)象存進(jìn) map 后，就沒(méi)做啥了，關(guān)鍵步驟肯定在于makeOptionsHot這個(gè)方法。

/**
?*?Make?a?Component?options?object?hot.
?*?讓一個(gè)組件對(duì)象變得性感...哦不，是支持熱更新。
?*
?*?@param?{String}?id
?*?@param?{Object}?options
?*/

function?makeOptionsHot(id,?options)?{
??//?options?就是我們傳入的組件對(duì)象
??//?initHookName?就是'beforeCreate'
??injectHook(options,?initHookName,?function()?{
????//?這個(gè)函數(shù)會(huì)在beforeCreate聲明周期執(zhí)行
????const?record?=?map[id];
????if?(!record.Ctor)?{
??????//?此時(shí)this已經(jīng)是vue的實(shí)例對(duì)象了
??????//?把組件實(shí)例的構(gòu)造函數(shù)賦值給record的Ctor屬性。
??????record.Ctor?=?this.constructor;
????}
????//?在instances里存儲(chǔ)這個(gè)實(shí)例。
????record.instances.push(this);
??});
??//?在組件銷毀的時(shí)候把上面存儲(chǔ)的instance刪除掉。
??injectHook(options,?'beforeDestroy',?function()?{
????const?instances?=?map[id].instances;
????instances.splice(instances.indexOf(this),?1);
??});
}

//?往生命周期里注入某個(gè)方法
function?injectHook(options,?name,?hook)?{
??const?existing?=?options[name];
??options[name]?=?existing
??????Array.isArray(existing)
????????existing.concat(hook)
??????:?[existing,?hook]
????:?[hook];
}

看完了這幾個(gè)函數(shù)以后，我們對(duì) createRecord 應(yīng)該有個(gè)清晰的認(rèn)識(shí)了。
比如上面我們的例子中這段代碼

const?appOptions?=?{
??render:?h?=>?h('div',?'foo'),
};

api.createRecord('my-app',?appOptions);

1. 在 map 中創(chuàng)建一個(gè)記錄，這個(gè)記錄有options字段也就是上面?zhèn)魅氲慕M件對(duì)象，還有instances用于記錄活動(dòng)組件的實(shí)例，Ctor用來(lái)記錄組件的構(gòu)造函數(shù)。

//?map
{
????my-app:?{
????????options:?appOptions,
????????instances:?[],
????????Ctor:?null
????}
}

2. 在 appOptions 中，混入生命周期方法 beforeCreate，在組件的這個(gè)生命周期中，把組件自身的示例 push 到 map 里對(duì)應(yīng) instances 數(shù)組中，并且記錄自己的構(gòu)造函數(shù)在 Ctor 字段上。 beforeCreate 執(zhí)行完了以后的 map 對(duì)象長(zhǎng)這樣。

接下來(lái)進(jìn)入關(guān)鍵的 rerender 函數(shù)。

rerender

exports.rerender?=?(id,?options)?=>?{
??const?record?=?map[id];
??if?(!options)?{
????//?如果沒(méi)傳第二個(gè)參數(shù)?就把所有實(shí)例調(diào)用?$forceUpdate
????record.instances.slice().forEach(instance?=>?{
??????instance.$forceUpdate();
????});
????return;
??}
??record.instances.slice().forEach(instance?=>?{
????//?將實(shí)例上的?$options上的render直接替換為新傳入的render函數(shù)
????instance.$options.render?=?options.render;
????//?執(zhí)行?$forceUpdate更新視圖
????instance.$forceUpdate();
??});
};

其實(shí)這個(gè)原函數(shù)很長(zhǎng)，但是簡(jiǎn)化以后核心的更改視圖的方法就是這些，平常我們?cè)趯?xiě) vue 單文件組件的時(shí)候都會(huì)像下面這樣寫(xiě)：

這樣的.vue 文件，會(huì)被 vue-loader 編譯成單個(gè)的組件選項(xiàng)對(duì)象，template 中的部分會(huì)被編譯成 render 函數(shù)掛到組件上，最終生成的對(duì)象是類似于：

export?default?{
??data()?{
????return?{
??????msg:?'Hello?World',
????};
??},
??render(h)?{
????return?h('span',?this.msg);
??},
};

而在運(yùn)行時(shí)，組件實(shí)例（也就是生命周期或者 methods 中訪問(wèn)的 this 對(duì)象）會(huì)通過(guò)option.render 去實(shí)現(xiàn)的。我們可以去 vue 的源碼里驗(yàn)證一下我們的猜想。

而在options.render 給替換成新的 render 方法了，這個(gè)時(shí)候再調(diào)用$forceUpdate，不就渲染新傳入的 render 了嗎？這個(gè)運(yùn)行時(shí)的偷天換日我不得不佩服~

reload

reload 的講解我們基于這樣一個(gè)示例：
一開(kāi)始會(huì)顯示 foo 的文本，一秒以后會(huì)顯示成 bar。

function?prepare(id,?Comp)?{
??api.createRecord(id,?Comp);
??return?new?Vue({
????render:?h?=>?h(Comp),
??});
}

const?id1?=?'reload:?mounted';
const?app?=?prepare(id1,?{
??data:?()?=>?({?msg:?'foo'?}),
??render(h)?{
????return?h('div',?this.msg);
??},
}).$mount('#app');

//?reload
setTimeout(()?=>?{
??api.reload(id1,?{
????data:?()?=>?({?msg:?'bar'?}),
????render(h)?{
??????return?h('div',?this.msg);
????},
??});
},?1000);

reload 的情況會(huì)更加復(fù)雜，涉及到很多 Vue 內(nèi)部的運(yùn)行原理，這里只能簡(jiǎn)單的描述一下。

exports.reload?=?function(id,?options)?{
??const?record?=?map[id];
??if?(options)?{
????//?reload的情況下?傳入的options會(huì)當(dāng)做一個(gè)新的組件
????//?所以要用makeOptionsHot重新做一下記錄
????makeOptionsHot(id,?options);
????const?newCtor?=?record.Ctor.super.extend(options);

????newCtor.options._Ctor?=?record.options._Ctor;
????record.Ctor.options?=?newCtor.options;
????record.Ctor.cid?=?newCtor.cid;
????record.Ctor.prototype?=?newCtor.prototype;
??}
??record.instances.slice().forEach(function(instance)?{
????instance.$vnode.context.$forceUpdate();
??});
};

這段代碼關(guān)鍵的點(diǎn)開(kāi)始于

const?newCtor?=?record.Ctor.super.extend(options);

利用新傳入的配置生成了一個(gè)新的組件構(gòu)造函數(shù) 然后對(duì) record 上的 Ctor 進(jìn)行了一系列的賦值

newCtor.options._Ctor?=?record.options._Ctor;
record.Ctor.options?=?newCtor.options;
record.Ctor.cid?=?newCtor.cid;
record.Ctor.prototype?=?newCtor.prototype;

注意第一次調(diào)用 reload 時(shí)，這里的 record.Ctor 還是最初傳入的 Ctor，是由

const?app?=?prepare(id1,?{
??data:?()?=>?({?msg:?'foo'?}),
??render(h)?{
????return?h('div',?this.msg);
??},
}).$mount('#app');

這個(gè)配置對(duì)象所生成的構(gòu)造函數(shù)，但是構(gòu)造函數(shù)的 options、cid 和 prototype 被替換成了由

api.reload(id1,?{
??data:?()?=>?({?msg:?'bar'?}),
??render(h)?{
????return?h('div',?this.msg);
??},
});

這個(gè)配置對(duì)象所生成的構(gòu)造函數(shù)上的 options、cid 和 prototype，此時(shí)的 cid 肯定是不同的。

也就是說(shuō)，構(gòu)造函數(shù)的 cid 變了！，這個(gè)點(diǎn)記住后面要考！

繼續(xù)看源碼

record.instances.slice().forEach(function(instance)?{
??instance.$vnode.context.$forceUpdate();
});

此時(shí)的 instance 只有一個(gè)，就是在 reload 之前運(yùn)行的那個(gè) msg 為 foo 的實(shí)例，它的$vnode.context 是什么呢？
直接在放上控制臺(tái)打印出來(lái)的截圖，這個(gè) context 是一個(gè) vue 實(shí)例，注意這個(gè) options 里的 render 函數(shù)，是不是非常眼熟，沒(méi)錯(cuò)，這個(gè) vue 實(shí)例其實(shí)就是我們的 prepare 函數(shù)中

new?Vue({
??render:?h?=>?h(Comp),
});

返回的 vm 實(shí)例。

那么這個(gè)函數(shù)的 $forceUpdate必然會(huì)觸發(fā) render: h => h(Comp) 這個(gè)函數(shù)，看到此時(shí)我們似乎還是沒(méi)看出來(lái)這些操作為什么會(huì)銷毀舊組件，創(chuàng)建新組件。那么此時(shí)只能探究一下這個(gè)h到底做了什么，這個(gè)h就是對(duì)應(yīng)著 $createElement 方法。

$createElement 在創(chuàng)建 vnode 的時(shí)候，最底層會(huì)調(diào)用一個(gè) createComponent 方法，

這個(gè)方法把 Comp 對(duì)象當(dāng)做 Ctor，然后調(diào)用 Vue.extend 這個(gè) api 創(chuàng)造出構(gòu)造函數(shù)，

默認(rèn)情況下第一次 h(Comp) 會(huì)生成類似于 vue-component-${cid}作為組件的 tag，

在本例中最開(kāi)始渲染 msg 為 foo 的組件時(shí)，tag 為 vue-component-1，

并且會(huì)把這個(gè)構(gòu)造函數(shù)緩存在_Ctor 這個(gè)變量上，這樣下次渲染再執(zhí)行到 createComponent 的時(shí)候就不需要重新生成一次構(gòu)造函數(shù)了，

Vue 在選擇更新策略時(shí)調(diào)用一個(gè)sameVnode方法

來(lái)決定是要進(jìn)行打補(bǔ)丁，還是徹底銷毀重建，這個(gè)sameVnode如下：

function?sameVnode(a,?b)?{
??return?(
????//?省略其他...
????a.tag?===?b.tag
??);
}

其中很關(guān)鍵的一個(gè)對(duì)比就是a.tag === b.tag

但是 reload 方法偷梁換柱把 Ctor 的 cid 換成了 2，

生成的 vnode 的 tag 是就 vue-component-2

后續(xù)再調(diào)用 context.$forceUpdate 的時(shí)候，會(huì)發(fā)現(xiàn)兩個(gè)組件的 tag 不一樣，所以就走了銷毀 -> 重新創(chuàng)建的流程。

總結(jié)

這個(gè)庫(kù)里面還是能看出很多尤大的編程風(fēng)格，很適合進(jìn)行學(xué)習(xí)，只是 reload 方法必須要深入了解 Vue 源碼才有可能搞懂生效的原理。

可以看出來(lái) Vue 的很多第三方庫(kù)是利用 Vue 內(nèi)部提供的一些機(jī)制，甚至是只有了解源碼細(xì)節(jié)才能想到的一些 hack 的方式去實(shí)現(xiàn)的，所以如果想更加深入的玩好 Vue，源碼是有必要去學(xué)習(xí)的，在學(xué)習(xí) Vue 源碼的過(guò)程中會(huì)被尤大的代碼規(guī)范，還有一些精妙的設(shè)計(jì)所折服，肯定會(huì)有很大的收獲。

rerender這個(gè)方法相對(duì)來(lái)說(shuō)還是比較好理解的，但是reload方法是怎么生效的就非常讓人難以理解了，我一步一步斷點(diǎn)調(diào)試了大概六七個(gè)小時(shí)，才漸漸得出結(jié)論，只能說(shuō)好用的 api 后面潛藏著作者用心良苦的設(shè)計(jì)??！想要徹底深入的理解 vue 的原理，強(qiáng)烈推薦黃軼老師的這門課程：

Vue.js 源碼全方位深入解析 （含 Vue3.0 源碼分析）^[5]

??看完三件事

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我三個(gè)小忙：

1. 點(diǎn)贊，讓更多的人也能看到介紹內(nèi)容（收藏不點(diǎn)贊，都是耍流氓-_-）
2. 關(guān)注公眾號(hào)“前端勸退師”，不定期分享原創(chuàng)知識(shí)。
3. 也看看其他文章

勸退師個(gè)人微信：huab119

也可以來(lái)我的GitHub博客里拿所有文章的源文件：

前端勸退指南：https：//github.com/roger-hiro/BlogFN一起玩耍呀

參考資料