解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory

 更新时间:2022年12月05日 09:54:37   作者:潇似风  
这篇文章主要介绍了解决Vue使用百度地图BMapGL内存泄漏问题 Out of Memory,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用百度地图BMapGL内存泄漏 Out of Memory

在项目中使用了ElementUI 的 drawer 组件有地图操作

并开启了 :destroy-on-close=“true”

开关多次以后浏览器崩溃了。

刷新页面,打开任务管理器,复现刚刚的操作,会发现浏览器的内存占用一直在增加

解决

1.对象不定义在data中

  initMap(){
     map = new BMapGL.Map("allMap") // 创建Map实例
  }

2.在vue中组件使用 v-if 指令会从dom中移除

但不会清除地图实例,所以要在销毁钩子里对地图进行销毁

  beforeDestroy() {
    map.destroy()
    map = null
  },

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 了解VUE的render函数的使用

    了解VUE的render函数的使用

    本篇文章主要介绍了了解VUE的render函数的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 对Vue beforeRouteEnter 的next执行时机详解

    对Vue beforeRouteEnter 的next执行时机详解

    今天小编就为大家分享一篇对Vue beforeRouteEnter 的next执行时机详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Vue自定义图片懒加载指令v-lazyload详解

    Vue自定义图片懒加载指令v-lazyload详解

    这篇文章主要为大家详细介绍了Vue自定义图片懒加载指令v-lazyload,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • vue中实现千位分隔符的示例代码

    vue中实现千位分隔符的示例代码

    本文主要介绍了vue中实现千位分隔符的示例代码,主要两种方法,一种是某一个字段转换,一种是表格table中的整列字段转换,具有一定的参考价值,感兴趣的可以了解一下
    2023-11-11
  • antfu大佬的v-lazy-show教我学会了怎么编译模板指令

    antfu大佬的v-lazy-show教我学会了怎么编译模板指令

    这篇文章主要介绍了antfu大佬的v-lazy-show,我学会了怎么编译模板指令示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • 如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

    如何使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理

    最近在做一个文件夹管理的功能,要实现一个树状的拖拽文件夹面板,里面包含两种元素,文件夹以及文件,这篇文章主要介绍了使用Vue3+elementPlus的Tree组件实现一个拖拽文件夹管理 ,需要的朋友可以参考下
    2023-09-09
  • vue使用el-upload上传文件及Feign服务间传递文件的方法

    vue使用el-upload上传文件及Feign服务间传递文件的方法

    这篇文章主要介绍了vue使用el-upload上传文件及Feign服务间传递文件的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Nuxt.js实现一个SSR的前端博客的示例代码

    Nuxt.js实现一个SSR的前端博客的示例代码

    这篇文章主要介绍了Nuxt.js实现一个SSR的前端博客的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • Vue中@click事件的常见修饰符用法总结

    Vue中@click事件的常见修饰符用法总结

    这篇文章主要给大家介绍了关于Vue中@click事件的常见修饰符用法的相关资料,@click事件修饰符是在Vue组件中用来修改@click事件行为的特殊标记,需要的朋友可以参考下
    2023-10-10
  • Vue文件如何代替传统的HTML文件

    Vue文件如何代替传统的HTML文件

    随着前端工程化的不断推进,传统的HTML、CSS、JavaScript三者分离的开发模式逐渐显露出一些不足之处,尤其是在构建复杂的单页应用(SPA)时,Vue.js作为一个现代化的前端框架,提供了多种工具和技术来简化开发流程,本文将探讨.vue文件是如何替代传统HTML文件的角色
    2024-10-10

最新评论