Vue項目的熱更新怎麼辣麼好用啊？原來200行代碼就搞定（深度解析）

時間  2019-11-05
標籤 vue 項目 更新 怎麼 好用 原來 代碼 搞定 深度 解析 简体版
原文   原文鏈接

你們都用過Vue-CLI建立vue應用，在開發的時候咱們修改了vue文件，保存了文件，瀏覽器上就自動更新出咱們寫的組件內容，很是的順滑流暢，大大提升了開發效率。想知道這背後是怎麼實現的嗎，其實代碼並不複雜。html

這個功能的實現底層用了vue-hot-load-api這個庫，得益於vue的良好設計，熱更新的實現總共就一個js文件，200行代碼，綽綽有餘。vue

而在這個庫裏涉及到的技巧又很是適合咱們去深刻了解vue內部的一些機制，因此趕快來和我一塊兒學習吧。node

提要

本文單純的從vue-hot-load-api這個庫出發，在瀏覽器的環境運行Vue的熱更新示例，主要測試的組件是普通的vue組件而不是functional等特殊組件，以最簡單的流程搞懂熱更新的原理。
在源碼解析中貼出的代碼會省略掉一些不太相關的流程，更便於理解。webpack

解析

從github倉庫示例入手

進入了這個github倉庫之後，最早開始看的確定是Readme的裏的示例，在看示例的時候做者給出的註釋就很是重要了，他會標註出每個重要的環節。而且咱們要結合本身的一些經驗排除掉和這個庫無關的代碼。（在這個示例中，webpack的相關代碼就能夠先不去過多關注）git

第一步須要調用install方法，傳入Vue構造函數，根據註釋來看，這一步是要知道這個庫與Vue版本之間是否兼容。github

// make the API aware of the Vue that you are using.
  // also checks compatibility.
  api.install(Vue)
複製代碼

接下來的這段註釋告訴咱們，每一個須要熱更新的組件選項對象，咱們都須要爲它創建一個獨一無二的id，而且這段代碼須要在初始化的時候完成。web

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)
  }
複製代碼

最後就是激動人心的熱更新時間了，
根據註釋來看，這個庫的使用分爲兩種狀況。編程

  • rerender 只有template或者render函改變的狀況下使用。
  • reload 若是template或者render未改變，則這個函數須要調用reload方法先銷燬而後從新建立（包括它的子組件）。
// 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)
複製代碼

從這個簡單的示例裏面能夠看出，這個庫的核心流程就是：api

  1. api.install 檢測兼容性。
  2. api.createRecord 爲組件對象經過一個獨一無二的id創建一個記錄。
  3. api.rerender 或api.reload 進行組件的熱更新。

什麼，Readme的示例到此就結束了？這個very-unique-id究竟是個什麼東西，myComponentOptions又是什麼樣的。數組

由於這個倉庫可能並非面向廣大開發者的，因此它的文檔寫的很是的簡略。其實看完了這個簡短的示例，你們確定仍是一臉懵逼的。

在看一個你沒有熟練使用的庫的源碼的時候，其實還有一個很關鍵的步驟，那就是看測試用例。

探索測試用例

測試用例

上面咱們總結出兩個關鍵api rerender 和 reload 以後，就帶着目的性的去看測試用例。

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

// 初始化
api.install(Vue)

// 這個方法接受id和組件選項對象，
// 經過createRecord去記錄組件
// 而後返回一個vue組件實例。
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'做爲這個組件對象的id，
  // 這個組件的內容應該是 <div>foo</div>
  // 調用$mount生成dom節點
  const app = prepare(id0, {
    render: h => h('div', 'foo')
  }).$mount()
  
  // $el就是組件生成的dom元素，指望textContent文字內容爲foo
  expect(app.$el.textContent).toBe('foo')

  // rerender 後dom節點變成 <div>bar</div>
  api.rerender(id0, {
    render: h => h('div', 'bar')
  })
  
  // 經過nextTick保證dom節點已經更新
  // 指望textContent文字內容爲bar
  Vue.nextTick(() => {
    expect(app.$el.textContent).toBe('bar')
    done()
  })
})
複製代碼

reload用例

const id1 = 'reload: mounted'
test(id1, done => {
  // 經過一個count來計數
  let count = 0
  
  // app組件會在created的時候讓count + 1
  // destroyed的時候讓count - 1
  const app = prepare(id1, {
    created () {
      count++
    },
    destroyed () {
      count--
    },
    data: () => ({ msg: 'foo' }),
    render (h) {
      return h('div', this.msg)
    }
  }).$mount()
  // 確保內容正確
  expect(app.$el.textContent).toBe('foo')
  // 確保created週期執行 此時的count是1
  expect(count).toBe(1)

  // 調用created 傳入新組件的created時 count會-1
  api.reload(id1, {
    created () {
      count--
    },
    data: () => ({ msg: 'bar' }),
    render (h) {
      return h('div', this.msg)
    }
  })
  
  Vue.nextTick(() => {
    // 確保內容正確
    expect(app.$el.textContent).toBe('bar')
    // 在reload以前 count是1
    // 調用reload以後 會先調用前一個組件的destory生命週期 此時count是0
    // 接下來調用新組建的created生命週期 此時count是-1
    expect(count).toBe(-1)
    done()
  })
})
複製代碼

具體流程已經在註釋裏分析了，果真和示例代碼的註釋裏寫的同樣，並且如今咱們也更清楚這個api到底該怎麼用了。

總結一個最簡單的可用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);
複製代碼

這個demo（源碼）是直接在瀏覽器可用的，效果以下：

效果

源碼分析

源碼地址

全局變量

進入js文件的入口，首先定義了一些變量

// Vue構造函數
let Vue // late bind
// Vue版本
let version
// createRecord方法保存id -> 組件映射關係的對象
const map = Object.create(null)
if (typeof window !== 'undefined') {
  // 將map對象存儲在window上
  window.__VUE_HOT_MAP__ = map
}
// 是否已經安裝過
let installed = false
// 這個變量暫時沒用
let isBrowserify = false
// 初始化生命週期的名字 默認是Vue的beforeCreate生命週期
let initHookName = 'beforeCreate'
複製代碼

其實看到window對象的出現，咱們就已經能夠肯定這個api能夠在瀏覽器端調用。

install

exports.install = function (vue, browserify) {
  // 若是安裝過了就再也不重複安裝
  if (installed) { return }
  installed = true
  
  // 兼容es modules模塊
  Vue = vue.__esModule ? vue.default : vue
  // 把vue的版本如2.6.3分隔成[2, 6, 3] 這樣的數組
  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以上的版本才支持這個庫。
  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方法很簡單，就是幫你看一下Vue的版本是否在2.0以上，確認一下兼容性，關於初始化生命週期，在這篇文章裏咱們就不考慮2.0.0-alpha.7如下版本，能夠認爲這個庫的初始化工做就是在beforeCreate這個生命週期進行。

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) {
  // 若是已經存儲過了就return
  if(map[id]) { return }

  // 關鍵流程 下一步解析
  makeOptionsHot(id, options)
  
  // 將記錄存儲在map中
  // instances變量應該不難猜出是vue的實例對象。
  map[id] = {
    options: options,
    instances: []
  }
}
複製代碼

這一步在把id和對應的options對象存進map後，就沒作啥了，關鍵步驟確定在於makeOptionsHot這個方法。

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

function makeOptionsHot(id, options) {
    // options 就是咱們傳入的組件對象
    // initHookName 就是'beforeCreate'
    injectHook(options, initHookName, function() {
      // 這個函數會在beforeCreate聲明週期執行
      const record = map[id]
      if (!record.Ctor) {
        // 此時this已是vue的實例對象了
        // 把組件實例的構造函數賦值給record的Ctor屬性。
        record.Ctor = this.constructor
      }
      // 在instances裏存儲這個實例。
      record.instances.push(this)
    })
    // 在組件銷燬的時候把上面存儲的instance刪除掉。
    injectHook(options, 'beforeDestroy', function() {
      const instances = map[id].instances
      instances.splice(instances.indexOf(this), 1)
    })
}

// 往生命週期裏注入某個方法
function injectHook(options, name, hook) {
  const existing = options[name]
  options[name] = existing
    ? Array.isArray(existing) ? existing.concat(hook) : [existing, hook]
    : [hook]
}
複製代碼

看完了這幾個函數之後，咱們對createRecord應該有個清晰的認識了。
好比上面咱們的例子中這段代碼

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

api.createRecord('my-app', appOptions)
複製代碼
  1. 在map中建立一個記錄，這個記錄有options字段也就是上面傳入的組件對象，還有instances用於記錄活動組件的實例，Ctor用來記錄組件的構造函數。
// map
{
    my-app: {
        options: appOptions,
        instances: [],
        Ctor: null
    }
}
複製代碼
  1. 在appOptions中，混入生命週期方法beforeCreate，在組件的這個生命週期中，把組件自身的示例push到map裏對應instances數組中，而且記錄本身的構造函數在Ctor字段上。 beforeCreate執行完了之後的map對象長這樣。
    map

接下來進入關鍵的rerender函數。

rerender

exports.rerender = (id, options) => {
  const record = map[id]
  if (!options) {
    // 若是沒傳第二個參數 就把全部實例調用$forceUpdate
    record.instances.slice().forEach(instance => {
      instance.$forceUpdate()
    })
    return
  }
  record.instances.slice().forEach(instance => {
    // 將實例上的$options上的render直接替換爲新傳入的render函數
    instance.$options.render = options.render
    // 執行$forceUpdate更新視圖
    instance.$forceUpdate()
  })
}
複製代碼

其實這個原函數很長，可是簡化之後核心的更改視圖的方法就是這些，日常咱們在寫vue單文件組件的時候都會像下面這樣寫：

<template>
    <span>{{ msg }}</span>
</template>

<script>
export default {
  data() {
      return {
          msg: 'Hello World'
      }
  }  
}
</script>
複製代碼

這樣的.vue文件，會被vue-loader編譯成單個的組件選項對象，template中的部分會被編譯成render函數掛到組件上，最終生成的對象是相似於：

export default {
  data() {
      return {
          msg: 'Hello World'
      }
  },
  render(h) {
      return h('span', this.msg)
  }
}
複製代碼

而在運行時，組件實例（也就是生命週期或者methods中訪問的this對象）會經過$option保存render這個函數，而經過上面的源碼咱們不難猜出vue在渲染組件的時候也是經過調用$option.render去實現的。咱們能夠去vue的源碼裏驗證一下咱們的猜測。

_render

而在$forceUpdate的時候，vue內部會從新調用_render這個方法去生成vnode，而後patch到界面上，在此以前rerender把$options.render給替換成新的render方法了，這個時候再調用$forceUpdate，不就渲染新傳入的render了嗎？這個運行時的偷天換日我不得不佩服~

reload

reload的講解咱們基於這樣一個示例：
一開始會顯示foo的文本，一秒之後會顯示成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的狀況會更加複雜，涉及到不少Vue內部的運行原理，這裏只能簡單的描述一下。

exports.reload = function(id, options) {
  const record = map[id]
  if (options) {
    // reload的狀況下 傳入的options會當作一個新的組件
    // 因此要用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()
  })
}
複製代碼

這段代碼關鍵的點開始於

const newCtor = record.Ctor.super.extend(options)
複製代碼

利用新傳入的配置生成了一個新的組件構造函數 而後對record上的Ctor進行了一系列的賦值

newCtor.options._Ctor = record.options._Ctor
 record.Ctor.options = newCtor.options
 record.Ctor.cid = newCtor.cid
 record.Ctor.prototype = newCtor.prototype
複製代碼

注意第一次調用reload時，這裏的record.Ctor仍是最初傳入的Ctor，是由

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

這個配置對象所生成的構造函數，可是構造函數的options、cid和prototype被替換成了由

api.reload(id1, {
    data: () => ({ msg: 'bar' }),
    render(h) {
      return h('div', this.msg)
    }
})
複製代碼

這個配置對象所生成的構造函數上的options、cid和prototype，此時的cid確定是不一樣的。

也就是說，構造函數的cid變了！，這個點記住後面要考！

繼續看源碼

record.instances.slice().forEach(function(instance) {
    instance.$vnode.context.$forceUpdate()
  })
複製代碼

此時的instance只有一個，就是在reload以前運行的那個msg爲foo的實例，它的$vnode.context是什麼呢？

context

直接在放上控制檯打印出來的截圖，這個context是一個vue實例，注意這個options裏的render函數，是否是很是眼熟，沒錯，這個vue實例其實就是咱們的prepare函數中 

new Vue({
  render: h => h(Comp)
})
複製代碼

返回的vm實例。

那麼這個函數的$forceUpdate必然會觸發 render: h => h(Comp) 這個函數，看到此時咱們彷佛仍是沒看出來這些操做爲何會銷燬舊組件，建立新組件。那麼此時只能探究一下這個h到底作了什麼，這個h就是對應着 $createElement方法。

$createElement方法

$createElement在建立vnode的時候，最底層會調用一個createComponent方法，

這個方法把Comp對象當作Ctor，而後調用Vue.extend這個api創造出構造函數，

默認狀況下第一次h(Comp) 會生成相似於vue-component-${cid}做爲組件的tag，

在本例中最開始渲染msg爲foo的組件時，tag爲vue-component-1，

而且會把這個構造函數緩存在_Ctor這個變量上，這樣下次渲染再執行到createComponent的時候就不須要從新生成一次構造函數了，

Vue在選擇更新策略時調用一個sameVnode方法

來決定是要進行打補丁，仍是完全銷燬重建，這個sameVnode以下：

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

複製代碼

其中很關鍵的一個對比就是a.tag === b.tag

可是reload方法偷樑換柱把Ctor的cid換成了2，

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

後續再調用context.$forceUpdate的時候，會發現兩個組件的tag不同，因此就走了銷燬 -> 從新建立的流程。

總結

這個庫裏面仍是能看出不少尤大的編程風格，很適合進行學習，只是reload方法必需要深刻了解Vue源碼纔有可能搞懂生效的原理。

能夠看出來Vue的不少第三方庫是利用Vue內部提供的一些機制，甚至是隻有了解源碼細節才能想到的一些hack的方式去實現的，因此若是想更加深刻的玩好Vue，源碼是有必要去學習的，在學習Vue源碼的過程當中會被尤大的代碼規範，還有一些精妙的設計所折服，確定會有很大的收穫。

rerender這個方法相對來講仍是比較好理解的，可是reload方法是怎麼生效的就很是讓人難以理解了，我一步一步斷點調試了大概六七個小時，才漸漸得出結論，只能說好用的api後面潛藏着做者用心良苦的設計啊！想要完全深刻的理解vue的原理，強烈推薦黃軼老師的這門課程：

Vue.js源碼全方位深刻解析 （含Vue3.0源碼分析）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程