本文轉(zhuǎn)載自微信公眾號(hào)「前端從進(jìn)階到入院 」，作者ssh前端 。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端從進(jìn)階到入院公眾號(hào)。   

大家都用過(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ù)雜。

[[337454]]

這個(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)該是 <div>foo</div> 
  // 調(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)變成 <div>bar</div> 
  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(); 
  }); 
}); 

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])是直接在瀏覽器可用的，效果如下：

[[337455]]

源碼分析

源碼地址[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 
  // 兼容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); 

在 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 
    } 
} 

在 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ě)：

<template> 
    <span>{{ msg }}</span> 
</template> 
 
<script> 
export default { 
  data() { 
      return { 
          msg: 'Hello World' 
      } 
  } 
} 
</script> 

這樣的.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)證一下我們的猜想。

_render

而在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方法

$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ì)有很大的收獲。

Vue.js 源碼全方位深入解析 (含 Vue3.0 源碼分析)[5]