What（HMR 是什么？）
咱们上面探讨的HMR都是基于vite本身实现的一套HMR零碎。vite实现的HMR是依据 ESM HMR 标准 来实现的。
HMR：Hot Module Reload模块热更新。
之前当咱们在编辑器中更新代码时，会触发浏览器的页面刷新，然而这个刷新是全量刷新，相当于CMD+R。这时页面的状态会被重置掉，总之体验不好。
而模块热更新就是为了解决这样的问题，只是刷新咱们编辑的代码所对应的模块，并且能放弃页面的状态。
能够看到这里咱们在编辑代码时，上面count的状态是保留了的。只是热更新了下面的文字局部的模块。Why（为什么须要 HMR？）
其实每个技术的诞生，都是为了解决之前所凸显进去的问题。HMR 也是如此，其实在下面也曾经说了起因。
这里再来总结一下：为什么须要 HMR？
- 解决批改代码后页面全量更新，体验不好的问题
- 解决全量更新导致的状态失落问题
How（怎么应用 HMR？）
vite中实现的HMR零碎其实是对ESM HMR标准中的API进行了一层封装。vite会被动监听文件的变动，而后触发对应的API，来实现模块的热更新。
所以首先咱们来简略理解一下这套标准中的API
API
hmr的API都注入到了import.meta的hot中。
咱们拜访的时候只须要import.meta.hot.[name]即可
import.meta是浏览器中内置的一个对象。【MDN】interface ImportMeta { readonly hot?: { readonly data: any // ======触发更新===== accept(): void // accept(cb: (mod: any) => void): void accept(dep: string, cb: (mod: any) => void): void accept(deps: string[], cb: (mods: any[]) => void): void // ================== prune(cb: () => void): void dispose(cb: (data: any) => void): void decline(): void invalidate(): void // =====监听hmr事件==== on(event: string, cb: (...args: any[]) => void): void // =================== }}accept(cb)
accept翻译过去就是承受。而在hmr中他也是这个意思：承受此次热更新，而承受热更新的模块被称为HMR边界
当咱们在文件中退出这行代码的时候，就是手动开启该文件模块的热更新。
当这个文件中的代码产生更新时，就会接管此次热更新的后果。
if (import.meta.hot) { import.meta.hot.accept((mod) => { console.log(mod, '==') })}:::dangeraccept中的mod就是更新之后的模块中所导出的内容。
:::
比方咱们的文件是上面这样，导出了render和other：
export const render = () => { // ...}export const other = () => { //...}if (import.meta.hot) { import.meta.hot.accept((mod) => { console.log(mod, '==') })}那么当咱们在这个文件中更新代码，承受热更新时此时mod中就是：
如果咱们须要承受其中一个导出模块的更新，那么间接调用mod.render()或者mod.other()即可在页面上更新到最新的内容。
如果你的文件中导出形式是默认导出export default xxx，那么mod中就是mod.default
在下面的代码中，咱们是向accept中传递了一个回调函数来被动触发热更新模块中的函数。因为咱们这个文件中只是申明了render、other函数，并没有执行，所以须要在accpet的回调中手动触发才能够
其实有些状况下也不必传回调函数。accept会把以后变更的文件中的最新内容执行一遍。就比方咱们这个文件就是一个可执行文件（相似自执行函数），当咱们import这个文件的时候，文件里的代码就会执行，例如上面的状况：
// render.tsconst render = () => { const app = document.querySelector<HTMLDivElement>('#app')! app.innerHTML = ` <h1>Hello Vite12</h1> <p id="p">是是是</p> `}render()if (import.meta.hot) { import.meta.hot.accept()}// main.tsimport './render.tx'’在render文件执行执行了render函数，这时accept就会从新执行这个文件，也就天经地义的触发了render函数。这时就不须要咱们向accpet传递回调函数了。
accept(dep, cb)
accept办法中也能够接管一个dep参数，也就是以后页面热更新时所依赖的子模块的门路。
这个dep参数，能够是一个独自字符串，也能够是一个字符串数组，当是数组时阐明依赖多个子模块
//main.tsimport { render } from './render'import { initsate } from './state'render()initsate()if (import.meta.hot) { import.meta.hot.accept('./render.ts', (mod) => { console.log(mod, '==') mod?.render() })}main模块依赖render文件
当render文件变更时，会接管热更新
因为此时没有依赖state文件，所以当state文件产生变更时会**reload page**，而不会热更新。
因为此时热更新的边界仅仅是render模块，只有render模块中的变更才会触发main的热更新
//main.tsimport { render } from './render'import { initsate } from './state'render()initsate()if (import.meta.hot) { import.meta.hot.accept(['./render.ts', './state.ts'], ([mod1, mod2]) => { console.log(mod1, mod2, '==') mod1?.render() mod2?.initsate() })}这时，当state模块中的文件发生变化时，就也会触发main的热更新了。
此时，回调函数中的mod为：（因为仅仅变更了state模块，所以mod1是undefined，也就阐明render模块没有更新，合乎预期。
dispose()
这个函数就是比较简单。就是在新模块更新前 旧模块销毁时的钩子。用来清理掉旧模块中的一些副作用。
const timerId = setInterval(() => { countEle.innerText = Number(countEle.innerText) + 1 + ''}, 1000)if (import.meta.hot) { import.meta.hot.dispose((data) => { // 清理副作用 clearInterval(timerId) })}在咱们须要 hmr 的模块中如果有定时器之类的操作，咱们热更新后如果不提前销毁定时器，就会反复执行定时，那么可能会呈现意想不到成果。
on(event,cb)
监听自定义 HMR 事件。
自定义 HMR 事件，是在服务端定义发送的。在 vite 中，咱们能够在插件中实现这件事。vite插件中提供了handleHotUpdate
// vite-plugin.tx// 省略其余代码handleHotUpdate({ server }) { server.ws.send({ type: 'custom', event: 'xxx-file-change', // 自定义事件名称 data: {} // 携带的信息 }) return []}// client import.meta.hot.on('xxx-file-change', (payload) => { console.log(payload)})https://github.com/sanyuan0704/island.js/pull/79
有时自定义hmr事件，没有触发页面更新。咱们能够利用监听自定义事件，来被动触发页面的rerender
data
该属性用来共享同一个模块中更新前后的数据。
在这外面绑定的数据，不会被hmr影响或重置。
import.meta.hot.data.count = 1decline()
示意此模块不可热更新，如果在流传 HMR 更新时遇到此模块，浏览器应该执行齐全从新加载。
invalidate()
从新加载页面。
下回书
hmr的具体执行流程请看系列的第二篇文章