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教程