对于Vite HMR 热加载剩下的补充。

在上片有关vite的文章我分享了Vite 热加载中accept,dispose,invalidate等。

我会接着上篇接着讲。

1.data可以保存数据,就继续接着上个计时器的例子将,我们会发现清除数据以后我们num会重新变成0，计时器也会从1开始进行打印，这种情况改变文件想要num的值继承改变文件时num的值就可以用到data存储数据。如下：

console.log(import.meta.hot.data);
export let num = import.meta.hot.data.Getnum ? import.meta.hot.data.Getnum() : 0;
export let timer = setInterval(() => {
  num++;
  console.log(num);
}, 1000);
console.log("1234!!!");
if (import.meta.hot) {
  import.meta.hot.dispose((newfile) => {
    clearInterval(timer);
  });
  import.meta.hot.data.Getnum = () => num;
  import.meta.hot.accept((newMoudle) => {});
}

在文件更新的时候将值存储在data下,在data中定义一个方法名为Getnum 返回此时的num,

import.meta.hot.accept可以看到我没有在里面写东西,那我为什么还要写他呢,其原因是如果不写会直接重新刷新。data中的值也会丢失,所以写一个空的让它不刷新,可以理解如果不写,默认如下:

if (import.meta.hot) {
  import.meta.hot.accept((newMoudle) => {
    import.meta.hot.invalidate()
  });
}

2.decline(),代表告诉vite我这个模块没有办法热更新,请你直接重新加载我这个模块吧,然后vite回去告诉浏览器重新加载,可以在网络中看见浏览器对文件的重新引入

3.on vite中import.meta.hot.on和Vue全局事件总线的on一样,都是用于监听事件，vite中的on事件类型有四个分别是

'vite:beforeUpdate',会当文件能容发生改变后,vite更新前触发,

import.meta.hot.on('vite:beforeUpdate',function(){
    console.log('文件更新之前');
  })

'vite:beforeFullReload',当完整的重载即将发生时触发

'vite:beforeFullReload' 当完整的重载即将发生时触发

'vite:brforePrune' 当不需要的模块即将剔除时触发

'vite:error'当发生错误时，触发

• 'vite:beforeFullReload' 当完整的重载即将发生时
• 'vite:beforePrune' 当不再需要的模块即将被剔除时
• 'vite:error' 当发生错误时（例如，语法错误）

vite 热加载就此就完结了,一天更新两篇点个赞吧,晚上可能还有一篇。