vite中的HMRapi之accept,dispose和invalidate

vite会通过import.meta.hot对象向外去暴露HMR api

在开发环境我们想要监听一个文件内容的变化相应的去更新文件,但是在生产模式中没有热更新,

理所当然没有import.meta.hot,我们也可以通过这一点来判断是在什么环境中

accept例子

 比如说我有一个count.js,我在main.js中引入

 

 向外暴露出来一个count ，进行if判断判断当前环境是否是开发环境,如果是的话，每一次count.js文件内容都改变的话,就会打印count,import.meta.hot.accept,第一个参数为一个字符串为文件路径若传递,newMoudle就会指向第一个参数这个文件,

 

若不传递第一个参数会接受参数模块本身

可以看到上面两张图片的作用都是一样的,区别是是否传递了第一个参数,注意的是我第一种写法是在main.js进行的,因为一个文件是无法引入本身的,所有需要将代码写在其它的文件中

dispose例子

先建一个foo.js,在main.js进行引入

 可以看到这个文件里有一个定时器,由于我在main.js进行了引入,所已会在我打开页面的时候开启定时器并进行了打印,但是一旦修改了文件的内容,就会出现这种情况

可以看到执行了两个定时器,这是因为在我们更新的时候定时器没有清除,

那么在哪里清除呢,答案是import.meta.hot.dispose

它会接受自身的模块或一个模块可以被其它模块使用,可以使用 hot.dispose 来清除任何由其更新副本产生的持久副作用：如:我们刚才的定时器未清除的问题

 

 这样问题就得到了解决

invalidate它相当于是location.reload()函数,会重新加载页面,

比如说我们可以在监听num属性在其值大于5时,重新加载页面,代码如下

今天的分享就到这里,谢谢大家