Vue-hot-reload-api 源碼解析

DobbyKim 發(fā)布于2019-08-21 12:01 / 981人閱讀

摘要：源碼解析起因最近在搞框架的熱加載方案，自然是少不了向成熟的框架學(xué)習(xí)偷窺。這將銷毀并重建整個(gè)組件包括子組件。通過使用說明可以看出，暴露的接口還是很清晰的，下面來看下具體源碼實(shí)現(xiàn)。

Vue-hot-reload-api 源碼解析 起因

最近在搞san框架的熱加載方案，自然是少不了向成熟的框架學(xué)習(xí)（偷窺ing）。熱加載方案基本也只是主流框架在做，且做的比較成熟，大部分應(yīng)用開發(fā)者并不會(huì)接觸到這部分東西，所以相應(yīng)的資料比較少。google了一下這個(gè)庫，發(fā)現(xiàn)木有人做相應(yīng)的解析，順手記錄下好了。

什么是Vue-hot-reload-api？

眾所周知，*.vue文件為廣大開發(fā)者提供了良好的開發(fā)體驗(yàn)，vue-loader的原理不多贅述，在vue的腳手架中，webpack通過vue-loader來解析*.vue文件，把template、js和style文件分離并讓相應(yīng)的loader去處理。

在這個(gè)過程中，vue-loader還會(huì)做些其他事情，比如向client端注入hot-reload相應(yīng)的代碼，構(gòu)建時(shí)編譯等等。

webpack的hmr原理也不多說了，vue的熱加載就是通過注入的代碼來實(shí)現(xiàn)組件的熱更新，下面來看下使用時(shí)的文檔和源碼。

用法

先來看下官方文檔。

你僅會(huì)在開發(fā)一個(gè)基于 Vue components 構(gòu)建工具的時(shí)候用到這個(gè)。對(duì)于普通的應(yīng)用，使用 vue-loader 或者 vueify 就可以了。

文檔中明確說明了，一般使用不需要用到這個(gè)，只有在開發(fā)相應(yīng)的構(gòu)建工具時(shí)才會(huì)用到。

// 定義一個(gè)組件作為選項(xiàng)對(duì)象
// 在vue-loader中，這個(gè)對(duì)象是Component.options
const myComponentOptions = {
  data () { ... },
  created () { ... },
  render () { ... }
}

// 檢測(cè) Webpack 的 HMR API
// https://doc.webpack-china.org/guides/hot-module-replacement/
if (module.hot) {
  const api = require("vue-hot-reload-api")
  const Vue = require("vue")

  // 將 API 安裝到 Vue，并且檢查版本的兼容性
  api.install(Vue)

  // 在安裝之后使用 api.compatible 來檢查兼容性
  if (!api.compatible) {
    throw new Error("vue-hot-reload-api與當(dāng)前Vue的版本不兼容")
  }

  // 此模塊接受熱重載
  // 在這兒多說一句，webpack關(guān)于hmr的文檔實(shí)在是太。。。
  // 各大框架的loader中關(guān)于hmr的實(shí)現(xiàn)都是基于自身模塊接受更新來實(shí)現(xiàn)
  module.hot.accept()

  if (!module.hot.data) {
    // 為了將每一個(gè)組件中的選項(xiàng)變得可以熱加載，
    // 你需要用一個(gè)不重復(fù)的id創(chuàng)建一次記錄，
    // 只需要在啟動(dòng)的時(shí)候做一次。
    api.createRecord("very-unique-id", myComponentOptions)
  } else {
    // 如果一個(gè)組件只是修改了模板或是 render 函數(shù)，
    // 只要把所有相關(guān)的實(shí)例重新渲染一遍就可以了，而不需要銷毀重建他們。
    // 這樣就可以完整的保持應(yīng)用的當(dāng)前狀態(tài)。
    api.rerender("very-unique-id", myComponentOptions)

    // --- 或者 ---

    // 如果一個(gè)組件更改了除 template 或 render 之外的選項(xiàng)，
    // 就需要整個(gè)重新加載。
    // 這將銷毀并重建整個(gè)組件（包括子組件）。
    api.reload("very-unique-id", myComponentOptions)
  }
}

通過使用說明可以看出，vue-hot-reload-api暴露的接口還是很清晰的，下面來看下具體源碼實(shí)現(xiàn)。

var Vue // late bind
var version

// 全局對(duì)象__VUE_HOT_MAP__來保存所有的構(gòu)造器和實(shí)例
var map = window.__VUE_HOT_MAP__ = Object.create(null)
var installed = false

// 這個(gè)參數(shù)來判斷是vue-loader還是vueify在調(diào)用
var isBrowserify = false

// 2.0.0-alpha.7版本前的初始化鉤子名是init，這個(gè)參數(shù)來作區(qū)分
var initHookName = "beforeCreate"

exports.install = function (vue, browserify) {
  if (installed) return
  installed = true

// 判斷打包的是esodule還是普通的js函數(shù)
  Vue = vue.__esModule ? vue.default : vue
  version = Vue.version.split(".").map(Number)
  isBrowserify = browserify

  // compat with < 2.0.0-alpha.7
  if (Vue.config._lifecycleHooks.indexOf("init") > -1) {
    initHookName = "init"
  }

  exports.compatible = version[0] >= 2
  // 兼容性，1.x和2.x的框架實(shí)現(xiàn)和loader實(shí)現(xiàn)都有很大差異
  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
  }
}

/**
 * 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) {
  var Ctor = null
  // 判斷傳入的options是對(duì)象還是函數(shù)
  if (typeof options === "function") {
    Ctor = options
    options = Ctor.options
  }
  // 燥起來，這個(gè)函數(shù)會(huì)在組件初始化和結(jié)束時(shí)的生命周期注入hook函數(shù)
  // 當(dāng)實(shí)例化以后，hook函數(shù)調(diào)用會(huì)把實(shí)例記錄到map中
  // destroy后會(huì)從map中刪除實(shí)例自身
  makeOptionsHot(id, options)
  
  map[id] = {
    Ctor: Vue.extend(options),
    instances: []
  }
}

/**
 * Make a Component options object hot.
 *
 * @param {String} id
 * @param {Object} options
 */

function makeOptionsHot (id, options) {
// 注入hook函數(shù)，到達(dá)相應(yīng)聲明周期后執(zhí)行
  injectHook(options, initHookName, function () {
    map[id].instances.push(this)
  })
  injectHook(options, "beforeDestroy", function () {
    var instances = map[id].instances
    instances.splice(instances.indexOf(this), 1)
  })
}

/**
 * Inject a hook to a hot reloadable component so that
 * we can keep track of it.
 *
 * @param {Object} options
 * @param {String} name
 * @param {Function} hook
 */

function injectHook (options, name, hook) {
// 判斷未注入時(shí)，生命周期init/beforeDestroy是否已經(jīng)有了函數(shù)
// 不存在的話，直接把生命周期函數(shù)置為[hook]
// 存在的話，判斷是否為Array，從而把已存在的函數(shù)和hook連接起來
  var existing = options[name]
  options[name] = existing
    ? Array.isArray(existing)
      ? existing.concat(hook)
      : [existing, hook]
    : [hook]
}

// 不得不說，這個(gè)一開始確實(shí)沒搞懂是為啥要包一層
// 自己實(shí)現(xiàn)的時(shí)候才知道，當(dāng)有error彈出時(shí)
// 如果不手動(dòng)這樣接住error，webpack會(huì)接到然后立即location.reload()
// 根本來不及看reload之前給出的提示
// 所以要手動(dòng)處理下error
function tryWrap (fn) {
  return function (id, arg) {
    try { fn(id, arg) } catch (e) {
      console.error(e)
      console.warn("Something went wrong during Vue component hot-reload. Full reload required.")
    }
  }
}

exports.rerender = tryWrap(function (id, options) {
  var record = map[id]
  // 邊界處理
  // 如果沒有傳options或者已經(jīng)為空
  // 會(huì)把這個(gè)構(gòu)造函數(shù)生成的所有實(shí)例強(qiáng)制刷新并返回
  if (!options) {
    record.instances.slice().forEach(function (instance) {
      instance.$forceUpdate()
    })
    return
  }
  // 判斷是否是構(gòu)造函數(shù)還是proto
  if (typeof options === "function") {
    options = options.options
  }
  
  // 修改map對(duì)象中的Ctor以便記錄
  record.Ctor.options.render = options.render
  record.Ctor.options.staticRenderFns = options.staticRenderFns
  // .slice方法保證了instances的length是有效的
  record.instances.slice().forEach(function (instance) {
    // 把更新過的模塊render函數(shù)和靜態(tài)方法指到舊的實(shí)例上
    // reset static trees
    // 然后重刷新
    instance.$options.render = options.render
    instance.$options.staticRenderFns = options.staticRenderFns
    instance._staticTrees = [] // reset static trees
    instance.$forceUpdate()
  })
})

exports.reload = tryWrap(function (id, options) {
  var record = map[id]
  if (options) {
    if (typeof options === "function") {
      options = options.options
    }
    makeOptionsHot(id, options)
    if (version[1] < 2) {
      // preserve pre 2.2 behavior for global mixin handling
      record.Ctor.extendOptions = options
    }
    
    // 其實(shí)最開始的commit中，并未繼承Ctor的父類，是直接Vue.extend(options)
    // 對(duì)vue了解不深，不知道為啥改成這樣
    // 有興趣的同學(xué)可以思考下
    var newCtor = record.Ctor.super.extend(options)
    record.Ctor.options = newCtor.options
    record.Ctor.cid = newCtor.cid
    record.Ctor.prototype = newCtor.prototype
    // 2.0早期版本兼容
    if (newCtor.release) {
      // temporary global mixin strategy used in < 2.0.0-alpha.6
      newCtor.release()
    }
  }
  record.instances.slice().forEach(function (instance) {
  // 判斷vNode和上下文是否存在
  // 不存在的需要手動(dòng)刷新
    if (instance.$vnode && instance.$vnode.context) {
      instance.$vnode.context.$forceUpdate()
    } else {
      console.warn("Root or manually mounted instance modified. Full reload required.")
    }
  })
})

短短的100多行代碼，從這個(gè)庫支持2.x的第一個(gè)commit讀起，慢慢由簡(jiǎn)單實(shí)現(xiàn)到覆蓋大部分邊界及兼容性考慮，再到vue-loader的調(diào)用，webpack的hmr各種坑和debug，這個(gè)過程很受啟發(fā)。

更多的前端、健身內(nèi)容，請(qǐng)點(diǎn)擊將就的博客查看