vue:内存泄露详解

 更新时间:2021年10月09日 16:38:29   作者:闲敲代码赚花花  
这篇文章主要介绍了一个Vue的内存泄露详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
什么是内存泄露?内存泄露是指new了一块内存,但无法被释放或者被垃圾回收。new了一个对象之后
,它申请占用了一块堆内存,当把这个对象指针置为null时或者离开作用域导致被销毁,那么这块内
存没有人引用它了在JS里面就会被自动垃圾回收。但是如果这个对象指针没有被置为null,且代码面
没办法再获取到这个对象指针了,就会导致无法释放掉它指向的内存,也就是说发生了内存泄露。
 
内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造
成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。
 
 
 
1、echarts图未彻底删除;
2、setTimeout和setInterval未清除;
3、全局定于变量未清除;
4、侦听器未清除

场景分析


其中全局对象onresize,侦听事件应在组价销毁前清除。

在这里插入图片描述

重点:在vue中,echarts绘图是十分消耗资源的,所以在组件销毁前,一定要清除对应的数据。

在data中定义如下:

在这里插入图片描述

在销毁组件前,应进行如下操作:

在这里插入图片描述

vue中1

 

vue中2

3keep-alive

一旦你使用了 keep-alive,那么你就可以访问另外两个生命周期钩子:activated和 deactivated。如果你想要在一个 keep-alive 组件被移除的时候进行清理或改变数据,可以使用 deactivated 钩子。

deactivated: function () {
  // 移除任何你不想保留的数据,或者销毁可能产生内存泄漏的地方
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!

相关文章

  • vue实现一拉到底的滑动验证

    vue实现一拉到底的滑动验证

    这篇文章主要为大家详细介绍了vue简单的一拉到底的滑动验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • web前端vue之CSS过渡效果示例

    web前端vue之CSS过渡效果示例

    本篇文章主要介绍了web前端vue之CSS过渡效果示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • Vue使用pdf-lib实现为文件流添加水印并预览

    Vue使用pdf-lib实现为文件流添加水印并预览

    这篇文章主要为大家详细介绍了Vue如何使用pdf-lib实现为文件流添加水印并预览的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起了解一下
    2023-03-03
  • Vue3中使用qrcode库实现二维码生成

    Vue3中使用qrcode库实现二维码生成

    Vue3中实现二维码生成需要使用第三方库来处理生成二维码的逻辑,常用的库有 qrcode和 vue-qrcode,本文主要介绍了Vue3中使用qrcode库实现二维码生成,感兴趣的可以了解一下
    2023-12-12
  • Vue 使用中的小技巧

    Vue 使用中的小技巧

    这篇文章主要介绍了Vue 使用中的小技巧,是小编日常开发的时候用到的小技巧,需要的朋友可以参考下
    2018-04-04
  • vue框架render方法如何替换template

    vue框架render方法如何替换template

    这篇文章主要介绍了vue框架render方法如何替换template,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue使用Proxy代理后仍无法生效的解决

    Vue使用Proxy代理后仍无法生效的解决

    这篇文章主要介绍了Vue使用Proxy代理后仍无法生效的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue批量注册组件实现动态组件技巧

    Vue批量注册组件实现动态组件技巧

    Vue 动态组件的应用场景很多,可应用于动态页签,动态路由等场景,其核心原理是批量注册,在Vue2和Vue3中实现原理相同,只是语法略有差异,本文给大家介绍了Vue批量注册组件实现动态组件技巧,需要的朋友可以参考下
    2024-11-11
  • Vue路由元信息与懒加载和模块拆分详细介绍

    Vue路由元信息与懒加载和模块拆分详细介绍

    有时,你可能希望将任意信息附加到路由上,如过渡名称、谁可以访问路由等。这些事情可以通过接收属性对象的meta属性来实现,并且它可以在路由地址和导航守卫上都被访问到
    2022-09-09
  • vue3+vant4实现pdf文件上传与预览组件

    vue3+vant4实现pdf文件上传与预览组件

    这篇文章主要介绍了vue3如何结合vant4实现简单的pdf文件上传与预览组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-04-04

最新评论