在上片有关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 热加载就此就完结了,一天更新两篇点个赞吧,晚上可能还有一篇。