销毁
微前端的应用销毁一直是个麻烦的地方
默认情况下,merak
只会执行钩子,并把dom放进缓存,事件也没有清除
当需要再彻底一点的清除,这个时候在卸载钩子中:
ts
import { $deactive, $onUnmount } from 'merak-helper'
$onUnmount(() => {
// ..
$deactive()
})
import { $deactive, $onUnmount } from 'merak-helper'
$onUnmount(() => {
// ..
$deactive()
})
这样会彻底清除dom
以及事件
进阶
上述的经验足以应付大多数情况,但如果有进一步的需求有必要了解一下原理:
merak
只会通知你挂载/卸载
,并不会帮你做任何事情,
你应该手动在钩子中进行挂载、卸载的准备
merak-helper
会提供连两个帮助函数:$deactive
,$destroy
,前者是将现有的dom
转为innerHtml
(webpack
在开发时style-loader
就会导致问题,详见issue
),
而后者则是完全删除merak
实例(尽量不要使用,我个人认为它完全没有任何良性的作用)。
这两者都不一定可靠!
如果出现完全无法解决的问题,请考虑使用iframe模式,每一个应用单独享有一个iframe
,卸载时iframe
销毁,和无界的重建模式一致
INFO
重建模式并非是一件没有意义的事情(虽然性能确实会接近iframe
)
相比于使用iframe
,至少有可操作的dom
,弹窗等全局样式,方便的状态、方法共享,不用考虑同源...
更关键的是,很多其他工具,如可视化测试、录屏,均不支持iframe